猫头鹰轮播在 WordPress 主题中不起作用。帮我解决这个问题

Posted 2023-05-09

【中文标题】猫头鹰轮播在 WordPress 主题中不起作用。帮我解决这个问题

【英文标题】：Owl carousel does not working in WordPress theme. Help me to solve this problem

【发布时间】：2021-10-20 19:24:13

【问题描述】：

我正在尝试将 html 模板转换为 WordPress 主题。 Owl carousel 在 HTML 模板中运行良好。但它不适用于 WordPress 主题。主要问题是在 HTML 模板中 Owl 轮播类由 Jquery 自动获取。但是，当我将 HTML 模板转换为 WordPress 主题时，猫头鹰轮播类无法获取。

我的 HTML 代码：-

<!-- Media Gallery -->
                                    <div class="blog-media">
                                        <ul class="clearlist content-slider light-content">
                                            <li>
                                                <img src="<?php echo get_template_directory_uri()?>/images/full-width-images/section-bg-16.jpg"  />
                                            </li>
                                            <li>
                                                <img src="<?php echo get_template_directory_uri()?>/images/full-width-images/section-bg-14.jpg"  />
                                            </li>
                                        </ul>
                                    </div>

我的 WordPress 代码：-

add_action('wp_enqueue_scripts', 'rythm_scripts');

function rythm_scripts()

    wp_enqueue_script( 'jq', get_template_directory_uri().'/js/jquery-3.5.1.min.js');
    wp_enqueue_script( 'easing', get_template_directory_uri().'/js/jquery.easing.1.3.js', array('jq'), '', true);
    wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/js/bootstrap.bundle.min.js',array('jq'),'', true);
    wp_enqueue_script( 'smoothscroll', get_template_directory_uri().'/js/SmoothScroll.js',array('jq'), '',true);
    wp_enqueue_script( 'scrollto', get_template_directory_uri().'/js/jquery.scrollTo.min.js',array('jq'), '',true);
    wp_enqueue_script( 'localscroll', get_template_directory_uri().'/js/localScroll.min.js',array('jq'), '',true);
    wp_enqueue_script( 'viewport', get_template_directory_uri().'/js/jquery.viewport.mini.js',array('jq'), '',true);
    wp_enqueue_script( 'countto', get_template_directory_uri().'/js/countTo.js',array('jq'), '',true);
    wp_enqueue_script( 'appear', get_template_directory_uri().'/js/jquery.appear.js',array('jq'), '',true);
    wp_enqueue_script( 'parallax', get_template_directory_uri().'/js/jquery.parallax-1.1.3.js');
    wp_enqueue_script( 'fitvids', get_template_directory_uri().'/js/jquery.fitvids.js',array('jq'), '',true);
    wp_enqueue_script( 'jq', get_template_directory_uri().'/js/jquery-3.5.1.min.js', '', true);
    wp_enqueue_script( 'owlslider', get_template_directory_uri().'/js/owl.carousel.min.js', array('jq'), '',true);
    wp_enqueue_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js',array('jq'), '',true);
    wp_enqueue_script( 'imagesloaded', get_template_directory_uri().'/js/imagesloaded.pkgd.min.js',array('jq'), '',true);
    wp_enqueue_script( 'magnific', get_template_directory_uri().'/js/jquery.magnific-popup.min.js',array('jq'), '',true);
    wp_enqueue_script( 'masonry', get_template_directory_uri().'/js/masonry.pkgd.min.js',array('jq'), '',true);
    wp_enqueue_script( 'lazyload', get_template_directory_uri().'/js/jquery.lazyload.min.js',array('jq'), '',true);
    wp_enqueue_script( 'wow', get_template_directory_uri().'/js/wow.min.js',array('jq'), '',true);
    wp_enqueue_script( 'morphext', get_template_directory_uri().'/js/morphext.js',array('jq'), '',true);
    wp_enqueue_script( 'typed', get_template_directory_uri().'/js/typed.min.js',array('jq'), '',true);
    wp_enqueue_script( 'all', get_template_directory_uri().'/js/all.js',array('jq'), true);
    wp_enqueue_script( 'contact', get_template_directory_uri().'/js/contact-form.js',array('jq'), '',true);
    wp_enqueue_script( 'ajaxchimp', get_template_directory_uri().'/js/jquery.ajaxchimp.min.js',array('jq'), '',true);
    wp_enqueue_script( 'object', get_template_directory_uri().'/objectFitPolyfill.min.js',array('jq'), '',true);
    wp_enqueue_script( 'splitting', get_template_directory_uri().'/js/splitting.min.js',array('jq'), '',true);

【参考方案1】：

在function.php中添加这3个文件： owl.carousel.min.js & owl.carousel.css & jquery.js

在<!-- Media Gallery --> 部分中，您需要一个带有 owl-carousel 和 owl-theme 的 div 例如：

 <ul id="example" class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
 </ul>

并在js文件中添加

$('#example').owlCarousel(
    loop:true,
    margin:10,
    nav:true,
 )