如何解决 Owl-Carousel 循环问题？

Question

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

我试过不循环，只自动播放，然后它可以工作但没有循环。另外，如果我添加 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

你可以这样写。它工作正常。

$(document).ready(function(){
    $('.sliderOfReferences').owlCarousel({
        loop:true,
        autoplay:true,
        autoplayTimeout:1000,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })
});

Answer 2

我在循环中使用 Owl Carousel，它运行良好。如果您查看https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html，您可以找到官方文档。

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

<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 类！当您只需要像文档中解释的那样为您的滑块应用 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({ //完成参数 ..

  $('.second-carousel').owlCarousel({ //完成参数 ..

  Link to a working example