如何修复Owl-Carousel循环问题？

Question

我正在使用Owl-Carousel 2在我的网站上创建一个无限循环的旋转木马，但无论我尝试过什么，我都无法使旋转木马工作。旋转木马总是移动一点点然后回来，它有点卡住了。

我试过没有循环，只是autoPlay，然后它工作但没有循环。此外，如果我添加autoplayHoverPause：true，使用loop：true，它不起作用，除非我将鼠标悬停在旋转木马上，然后它会滑动但当然循环仍然不起作用。

我的Js;

$('.award-full-slider').each(function () {
    if ($(this).find('.item').length > 1) {
        $(this).addClass('owl-carousel').owlCarousel({


          loop: true,
          autoplay : true,
          slideTransition: 'linear',
          autoplayTimeout : 10,
          autoplaySpeed : 15000,
          mouseDrag: false,
          dots: false,
          nav: false,
          autoplayHoverPause: true,
          responsive:{
              0:{
                  items:2,
                  nav:false,
                  loop:true,
              },
              600:{
                  items:4,
                  nav:false,
                  loop:true,
              },
              1000:{
                  items:6,
                  nav:false,
                  loop:true,
            }
          }
        });
    }
});

PHP循环代码;

<div class="home-award-area wrapper column" style="color:#0081ac !important">

<div class="home-award row-cont">
<div class="award-title"><a href="<?php echo home_url('news') ?>" class="action underline">Awards & Rankings</a></div>

<div class="items award-full-slider">

<?php
$query = new WP_Query(array(
'post_type' => 'award',
'posts_per_page' => 30,
'orderby' => 'date',
'order' => 'DESC',
));

while ($query->have_posts()) : $query->the_post();
$info = get_post_meta(get_the_ID(), '_post_info', true); if (!$info) $info = array();
$post_elem=get_post();
$postType = get_post_type_object(get_post_type());
    ?>

<div class="item">

<div class="content">
<div class="country">

<?php

$term = get_the_terms($ID,'award-country');
if ( ! empty( $term ) ) {
$term = $term[0];
?>
<?php echo $term->name ?>
<?php
}

?>
</div>

<div class="category">

<?php

$term = get_the_terms($ID,'award-category');
if ( ! empty( $term ) ) {
$term = $term[0];
?>
<?php echo $term->name ?>
<?php
}
?>
</div>
<div class="title">
<?php the_title() ?>
</div>
</div>

</div>


<?php endwhile; wp_reset_postdata(); ?>
</div>
</div>
</div>

谢谢您的帮助

Answer 1

我使用带有循环的猫头鹰旋转木马，它完美地运作。如果您查看https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html，您可以找到官方文档。

我认为您的PHP代码没有生成关于您必须包含在项目中的默认js,css owl carousel files的正确html结构

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

假设您正在使用这些默认文件，那么您的PHP代码就是这样的

<div class="items award-full-slider">
//YOUR WP LOOP $query = new WP_Query(array( ...
//YOUR WP LOOP while ($query->have_posts()) : $query->the_post(); ...
<div class="item">
//YOU ARE POSTING SLIDES HERE
</div>
//ENDLOOP
</div>

我认为应该对the documentation这样做，所以它应该是这样的

<div class="items award-full-slider">
//YOUR WP LOOP $query = new WP_Query(array( ...
//YOUR WP LOOP while ($query->have_posts()) : $query->the_post(); ...
<div class="item">
//YOUR POSTING STUFF HERE
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>

<div class="items award-full-slider">
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
  <?php
  $query = new WP_Query(array(
  'post_type' => 'award',
  'posts_per_page' => 30,
  'orderby' => 'date',
  'order' => 'DESC',
  ));

  while ($query->have_posts()):
    ?>
    <div class="owl-stage">
        <div class="owl-item">
           //Echo something here with regards to your WP_query posts objects
          <?php echo get_the_post_thumbnail(get_the_ID(), 'default'); 
          //and maybe the award-country, award-category ...
          ?>

        </div>

    </div>
</div>
</div>
</div>

老实说，我不明白你为什么要添加多个猫头鹰轮播类！当你只需要为你的滑块应用owl carousel js函数时，如文档中所述，所以它应该是这样的。

jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error

var owl = $('.owl-carousel');
owl.owlCarousel({
items:3,
loop:true, //HERE YOU ARE SAYING I WANT THE INFINITE LOOP
margin:0,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
nav:false,
dots:false
});
$('.play').on('click',function(){
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})
});

在这里你可以找到slider options的解释，所以当你在js owlCarousel函数调用中将loop定义为true时，你会得到无限循环。

您可以在页面上使用多个Owl Carousel来修改HTML代码和javascript

• 包含类“owl-carousel”的div标签必须为每个轮播提供另一个自定义类，例如：
• javascript也必须更新，每个轮播： $（'。first-carousel'）。owlCarousel（{//完成args .. $（'。second-carousel'）。owlCarousel（{//完成args .. Link to a working example