Search code examples
javascripthtmlowl-carousel

How to make owl-carousel autoplay?


I want to make my owl-carousel auto play then I take it form some posts in stackoverflow but it doesn't works

.js -->

$(document).ready(function(){
  owl = $(".owl-carousel");
  owl.owlCarousel({
      loop:true,
      autoplaySpeed:1000,
      items:5,
      autoplay:true
  });
});

my html-->

    <div class="container awards mt-5">
          <h1 class="text-title text-red">
            Awards
          </h1>
          <div class="owl-carousel owl-six" data-inner-pagination="true" data-white-pagination="true" data-nav="false" data-autoPlay="true">
              {% for item in page.awards.all %}
                  {% image item.image width-2048 as event_image %}
                  <div class="award-image" style="background-image:url({{ event_image.url }})"></div>
              {% endfor %}
          </div>
      </div>

Solution

  • The value of autoplay:true is what will make the slider autoplay. Edit your slider files and add autoplay:true to it rather than pasting the entire snippet. If you add autoplay:true at the end of the parameters as the last parameter than you won't need a comma ,. However if you add it in the middle then you will need a comma like so: autoplay:true,

    In addition if you want the slider to automatically rotate every 5 seconds then replace the value of true with 5000. Example: autoplay:5000