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代码未针对您必须包含在项目中的默认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函数调用中将循环定义为true时，就会遇到无限循环。

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

包含“ owl-carousel”类的div标签必须为每个轮播有另一个自定义类，例如：
每个转盘上的javascript也都必须更新：

$（'。first-carousel'）。owlCarousel（{//完整的参数..

$（'。second-carousel'）。owlCarousel（{//完整的参数..

Link to a working example

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

2 个答案: