CODEWITHSUNDEEP
owl-carousel
Abhijit
Abhijit

Reputation: 11

Is it possible to set different autoplay timeout for owl carousel items?

I have a carousel slider which includes photos and video as items. So, is it possible to set autoplayTimeout:5000 for image items and autoplayTimeout:25000 for video items?

Thanks in advance.

Upvotes: 1

Views: 1499

Answers (2)

Anurag Kushwaha
Anurag Kushwaha

Reputation: 7

yes,in my case i was having video on my owl carousel and i wanted to keep the video time as 10 seconds and rest as 5 seconds and i did this customization.

$("#carousel").owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
smartSpeed: 800,
nav: false,
items: 1,
onInitialized: function(e) { 
  var $activeItem = $("#carousel").find('.owl-item.active');
  var videItem  = $activeItem.find('video');
  if(videItem.length >0){
    $('#carousel').trigger('stop.owl.autoplay');
    setTimeout(function () { 
    $("#carousel").trigger('play.owl.autoplay')}, 10000)
  }
},
onTranslated: function(e){
  var $activeItem = $("#carousel").find('.owl-item.active');
  var videItem  = $activeItem.find('video');
  if(videItem.length >0){
    $('#carousel').trigger('stop.owl.autoplay');
    setTimeout(function () { 
    $("#carousel").trigger('play.owl.autoplay')}, 10000)
  }
 }
});

on every translate/change to the item it will check whether the current active item is having video element or not.

same we can extend for position of each item by using this code

onTranslated: function(e){
  var activeItemIndex = e.item.index;
  if(activeItemIndex == 2){
    $('#carousel').trigger('stop.owl.autoplay');
    setTimeout(function () { 
    $("#carousel").trigger('play.owl.autoplay')}, 10000)
  }
 }

Upvotes: 0

Digibusiness
Digibusiness

Reputation: 43

to solve this problem i used this approach:

  • when activating the owl first time, give the time you'd like for the first image (eg. 6s in my case)

    $(".owl-carousel").owlCarousel({ autoplay: true, autoplayTimeout: 6000, animateOut: 'fadeOut', lazyload: true, nav: false, items: 1 });

  • then, on the first 'change' event (not changeD, just change that is the exact change moment) you check that is the first change. If the case, you stop and restart the owl triggering the new interval from now onwards, eg 3s in my case:

    $('.owl-carousel').on('change.owl.carousel', function (e) { //console.log(e); if (e.namespace && e.property.name === 'position' && (e.relatedTarget.relative(e.property.value) == 1) ) { $('.owl-carousel').trigger('stop.owl.autoplay'); setTimeout( function () { $('.owl-carousel').trigger('play.owl.autoplay', [3000]); //from now on we go to 3s }, 0); } });

now, put the video for the first element and you're done!

Upvotes: 2

Related Questions