owl carousel in html not moving automatically

Question

i have put an owl carousal in my html website, when i load my html page, the owl carousal is not moving by its own. the owl carousal which looks like below:

if ($().owlCarousel) {
  $('.owl-carousel').each(function() {
   var $carousel = $(this);
   $carousel.find('> *').each(function (i) {
    $(this).attr('data-index', i);
   });
   var data = $carousel.data();

   var loop = data.loop ? data.loop : false,
    margin = (data.margin || data.margin === 0) ? data.margin : 30,
    nav = data.nav ? data.nav : false,
    navPrev = data.navPrev ? data.navPrev : '<i class="fa fa-angle-left">',
    navNext = data.navNext ? data.navNext : '<i class="fa fa-angle-right">',
    dots = data.dots ? data.dots : false,
    themeClass = data.themeclass ? data.themeclass : 'owl-theme',
    center = data.center ? data.center : false,
    items = data.items ? data.items : 4,
    autoplay = data.autoplay ? data.autoplay : false,
    responsiveXs = data.responsiveXs ? data.responsiveXs : 1,
    responsiveSm = data.responsiveSm ? data.responsiveSm : 2,
    responsiveMd = data.responsiveMd ? data.responsiveMd : 3,
    responsiveLg = data.responsiveLg ? data.responsiveLg : 4,
    draggable = (data.draggable === false) ? data.draggable : true,
    syncedClass = (data.syncedClass) ? data.syncedClass : false,
    filters = data.filters ? data.filters : false;

   if (filters) {
    $carousel.after($carousel.clone().addClass('owl-carousel-filter-cloned'));
    $(filters).on('click', 'a', function( e ) {
     //processing filter link
     e.preventDefault();
     if ($(this).hasClass('selected')) {
      return;
     }
     var filterValue = $( this ).attr('data-filter');
     $(this).siblings().removeClass('selected active');
     $(this).addClass('selected active');
     
     //removing old items
     for (var i = $carousel.find('.owl-item').length - 1; i >= 0; i--) {
      $carousel.trigger('remove.owl.carousel', [1]);
     };

     //adding new items
     var $filteredItems = $($carousel.next().find(' > ' +filterValue).clone());
     $filteredItems.each(function() {
      $carousel.trigger('add.owl.carousel', $(this));
      $(this).addClass('scaleAppear');
     });
     
     $carousel.trigger('refresh.owl.carousel');

     //reinit prettyPhoto in filtered OWL carousel
     if ($().prettyPhoto) {
      $carousel.find("a[data-gal^='prettyPhoto']").prettyPhoto({
       hook: 'data-gal',
       theme: 'facebook' /* light_rounded / dark_rounded / light_square / dark_square / facebook / pp_default*/
      });
     }
    });
    
   } //filters

   $carousel.owlCarousel({
    loop: loop,
    margin: margin,
    nav: nav,
    autoplay: autoplay,
    dots: dots,
    themeClass: themeClass,
    center: center,
    navText: [navPrev,navNext],
    mouseDrag: draggable,
    touchDrag: draggable,
    items: items,
    responsive: {
     0:{
      items: responsiveXs
     },
     767:{
      items: responsiveSm
     },
     992:{
      items: responsiveMd
     },
     1200:{
      items: responsiveLg
     }
    },
   })
   .addClass(themeClass);
   if(center) {
    $carousel.addClass('owl-center');
   }

   $window.on('resize', function() {
    $carousel.trigger('refresh.owl.carousel');
   });

   //topline two synced carousels
   if($carousel.hasClass('owl-news-slider-items') && syncedClass) {
    $carousel.on('changed.owl.carousel', function(e) {
     var indexTo = loop ? e.item.index+1 : e.item.index;
     $(syncedClass).trigger('to.owl.carousel', [indexTo]);
    })
   }


  });


 }

.owl-carousel {
  display: none;
  position: relative;
  -webkit-tap-color-main-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  width: 100%;
  z-index: 1;
}

.owl-carousel .owl-stage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-touch-action: pan-Y;
}

.owl-carousel.owl-shadow-items .owl-stage {
  padding-bottom: 11px;
  padding-top: 11px;
}

.owl-carousel .owl-stage:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}

.owl-carousel .owl-stage-outer {
  margin-left: -10px;
  margin-right: -10px;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  float: left;
  min-height: 1px;
  position: relative;
  -webkit-tap-color-main-color: transparent;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-item .box-shadow {
  height: 100%;
}

.owl-carousel .owl-item img {
  -webkit-transform-style: preserve-3d;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel.owl-loading {
  display: block;
  opacity: 0;
}

.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
  display: none;
}

.owl-carousel.owl-drag .owl-item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel" data-responsive-lg="3" data-responsive-md="2" data-responsive-sm="2" data-responsive-xs="1" data-nav="true" data-loop="true"></div>

now when i load my html page, the owl carousal is not moving by its own, i have to use my cursor to drag and see the next photo, can anyone please tell me what could be wrong. thanks in advance

take a look at this post -> https://stackoverflow.com/questions/22678720/owl-carousel-wont-autoplay — Ramyz, Jan 17 '20 at 09:47
@Zubair naser Oliyat Autoplay is boolean type `autoplay: true` not `autoplay: autoplay,` — Husna, Jan 17 '20 at 09:49

score 1 · Accepted Answer · answered Jan 17 '20 at 09:48

Changing autoplay to autoPlay alone did not work for me. What did the trick was to add autoplaySpeed and autoplayTimeout properties and set them to the same value, like this:

$(document).ready(function(){
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        items: 1,
        autoplay: true,
        autoPlaySpeed: 5000,
        autoPlayTimeout: 5000,
        autoplayHoverPause: true
    });
});

owl carousel in html not moving automatically

1 Answers1