0

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

我的 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" alt="" />
                                            </li>
                                            <li>
                                                <img src="<?php echo get_template_directory_uri()?>/images/full-width-images/section-bg-14.jpg" alt="" />
                                            </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);

}
4

1 回答 1

0

在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,
 })
于 2021-08-23T22:33:24.900 回答