How to fix Owl-Carousel loop issue?

Question

I am creating a carousel with infinite loop in my website by using Owl-Carousel 2 but whatever I've tried, I could not make the carousel work. The carousel always moves little bit and comes back, it kind of stuck.

I have tried without loop and just autoPlay, then it works, but no looping. Also, if I add autoplayHoverPause: true, with loop:true, it does not work unless I hover on the carousel, then it slides but of course loop still does not work.

My 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,
              }
           }
        });
    }
});

The PHP loop code:

<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>

Thank you for your help

Answer 1

you have to use it in

$(document).ready(function(){
  //your code
})

Answer 2

I use Owl Carousel with the loop and it works perfectly. If you check https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html you can find the official documentation.

I think that your PHP code is not generating the right html structure with regards to the default js,css owl carousel files that you must include in your project

<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>

Assuming that you are working with these default files, you PHP code looks like this

<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>

I think it should be done with regards to the documentation, So it should be something like this instead

<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>

And honestly I don't understand why you are adding multiple owl-carousel classes!! when you just need to apply the owl carousel js function for your slider like explained in the docs, so it should look like this.

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')
   })
});

Here you can find explanations for the slider options, So you are getting that infinite loop when you define loop to true in your js owlCarousel function call.

You can use multiple Owl Carousel on the page you just need to modify your HTML code and javascript

• The div tag containing the class "owl-carousel" must have another custom class for each carousel, example:

• The javascript must be updated too, each carousel:

  $('.first-carousel').owlCarousel({ //complete args ..

  $('.second-carousel').owlCarousel({ //complete args ..

Link to a working example

Answer 3

You can write like this. It works correctly.

$(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
            }
        }
    })
});