Question

我正在尝试在WordPress主题中实现OwlCarousel，我使用Bootstrap并导入OwlCarousel资产。

长话短说：我试过OwlCarousel 2，它没用。我想可能与我在这个WordPress实例中使用的一些东西有冲突。所以我尝试了OwlCarousel：不工作。

在每个single.php页面上，例如http://www.einfall7.ch/beta/manufaktur/tischkorpus-m-goetti/，菜单下方应该有一个猫头鹰轮播。我的浏览器什么都没显我不确定，问题出在哪里。

目标是显示文章中定义的全高图像轮播。

修改我用过的代码：

$(document).ready(function() {
    $("#owl-demo").owlCarousel({
        navigation: true, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true
            // "singleItem:true" is a shortcut for:
            // items : 1, 
            // itemsDesktop : false,
            // itemsDesktopSmall : false,
            // itemsTablet: false,
            // itemsMobile : false
    });
});

#owl-demo .item img {
    display: block;
    width: 100%;
    height: auto;
}

<html>
    <head>
        <!-- Important Owl stylesheet -->
        <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/owl/owl.carousel.css">
        <!-- Default Owl Theme -->
        <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/owl/owl.theme.css">
        <!-- Include Owl js plugin -->
        <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/owl/owl.carousel.js"></script>
    </head>
    <body>
        <div id="owl-demo" class="owl-carousel owl-theme">
            <div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="The Last of us"></div>
            <div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="GTA V"></div>
            <div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="Mirror Edge"></div>
        </div>
    </body>
</html>

Answer 1

在包含owlCarousel脚本之后，您可以包含jQuery 2.2.4。

由于Wordpress包含jQuery，因此不需要这样做（除非你想自己包含更新的版本，但首先应该dequeue）。

现在你在网站上运行了两个版本的jQuery。我认为这导致了owlCarousel的问题。删除你包含的那个，你应该没事。

最佳做法是使用Wordpress入队函数包含您使用的所有JS文件。您可以阅读更多相关信息here

这是一个包含脚本的示例函数：

/**
 * Enqueue script
 *
 * The callback is hooked to 'wp_enqueue_script' to ensure the script is only enqueued on the front-end.
 */
function my_scripts_method() {
    wp_enqueue_script( 'owlCarousel' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

OwlCarousel不显示Bootstrap 3

1 个答案: