CODEWITHSUNDEEP
javascriptjqueryhtmlowl-carousel
twan
twan

Reputation: 2659

Owl carousel autoplay only plays once when using the autoplay trigger on mouseenter

I am trying to only start autoplay when a user sees the carousel (else newest posts won't be visible by the time the user scrolls to the carousel element) using this code:

var App = (function(window){

  "use strict";

  var _this = null;

  var cacheCollection = {};

  return{

    init : function(){

      _this = this;

      this.autoplayonsection();
    },

    autoplayonsection: function(){
      var fbowl = $('#r-latest-news-slider');

      $('#r-latest-news').on('mouseenter', function() {
        console.log('autoplay');
        fbowl.trigger('play.owl.autoplay', [1000]);
      });
      $('#r-latest-news').on('mouseleave', function() {
        console.log('stop autoplay');
        fbowl.trigger('stop.owl.autoplay');
      });
    },


    LatestNewsCarousel: function(){
      if($("#r-latest-news-slider").length > 0){
        var owl = $('#r-latest-news-slider').owlCarousel({
            loop:true,
            margin: 30,
            items: 4,
            nav: false,
            dots: true,
            autoplay:false,
            autoplayTimeout:1000,
            responsive:{
                0:{
                    items:2
                },
                600:{
                    items:2
                },
                1000:{
                    items:4
                }
            }
        })
      }
    },
  }

})(window);

$(document).ready(function($) {
  $('#preloader').fadeOut('slow',function(){$(this).remove();});
  App.init();
});

The console log works fine and I see the texts when I move my mouse over the element or leave it. But for some reason the autoplay only works once, it slides once and then stops until I leave with my mouse en re enter the element at which time it plays once again.

This is the element that contains my carousel:

<div class="owl-carousel r-latest-news-list" id="r-latest-news-slider">

Why does it only play once? What can I do to fix it?

Upvotes: 0

Views: 973

Answers (1)

Syamsoul Azrien
Syamsoul Azrien

Reputation: 2752

I found out that the minimum value for autoplayTimeout is 1233...below than 1233 will not working...

below is the example of working options:

{
    items:1,
    loop:true,
    smartSpeed:1200,
    autoplay:true,
    autoplayTimeout:1500, //if you set this value to 1000, it will NOT working
    autoplayHoverPause:true,
}

Upvotes: 1

Related Questions