CODEWITHSUNDEEP
javascriptjqueryowl-carousel
szczepaniakdominik
szczepaniakdominik

Reputation: 472

Dynamic autoplay time with OwlCarousel 2

I need to dynamically set autoplayTimeout in my owlCarousel. First slide has to have autoplayTimeout set to 7000, next to 5000. I've tried with boolean and setTimeout but without positive results. Is it possible to set dynamic autoplayTimeout? Any ideas?

$(".typology-cover-slider").owlCarousel({
    loop: true,
    autoHeight: true,
    autoWidth: false,
    items: 1,
    margin: 0,
    nav: true,
    fluidSpeed: 100,
    autoplay: true,
    autoplayTimeout: 7000,
    autoplaySpeed: 400,
    navSpeed: 400,
});

Upvotes: 1

Views: 5926

Answers (2)

ReSedano
ReSedano

Reputation: 5060

I created a callBack function to stop autoplay at first item. This callBack function is trigged when items is changed (after checking the correct item number). I found a bug in owlcarousel in get correct current item number, but here: https://github.com/OwlCarousel2/OwlCarousel2/issues/1029 very clever user found a good solution I used.

To speed up my exemple, I set autoplayTimeout to only 1s. You can change it to 5s.

Be careful: I removed your autoplay:true 'cause it is set in callback function

var owl=$(".owl-carousel")

	owl.owlCarousel({
	    loop: true,
	    autoHeight: true,
	    autoWidth: false,
	    items: 1,
	    margin: 0,
	    nav: true,
	    fluidSpeed: 100,
	    autoplayTimeout: 1000, /* change to 5000 for normal autoplayTimeout. I set 1s only speed up this exemple */
	    autoplaySpeed: 400,
	    navSpeed: 400,
        onChanged: callBack
    });

    function callBack(event) {
    	// Solution to have correct item number. See: https://github.com/OwlCarousel2/OwlCarousel2/issues/1029. Thanks to Modicrumb
    	var current = (event.item.index + 1) - event.relatedTarget._clones.length / 2;
      	var allItems = event.item.count;
      	if (current > allItems || current <= 0) {
        	current = allItems - (current % allItems);
      	}

      	if(current==1){
      		owl.trigger('stop.owl.autoplay')
			setTimeout(function() {owl.trigger('play.owl.autoplay')}, 7000)   
      	}
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
    
    <div class="owl-carousel owl-theme">
	        <div class="item">boxes1 </div>
	        <div class="item">boxes2</div>
	        <div class="item">boxes3</div>
	        <div class="item">boxes4</div>
	        <div class="item">boxes5</div>
	        <div class="item">boxes6</div>
	        <div class="item">boxes7</div>
	        <div class="item">boxes8</div>
	        <div class="item">boxes9</div>
	        <div class="item">boxes10</div>
	    </div>

Upvotes: 3

gazdagergo
gazdagergo

Reputation: 6711

Use the onInitialized callback function for stopping the first slide for a longer time:

var selector = $(".typology-cover-slider");

selector.owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 5000,
    onInitialized: function() { 
      selector.trigger('stop.owl.autoplay');
        setTimeout(function() {selector.trigger('play.owl.autoplay')}, 7000)   
      },
});

Upvotes: 1

Related Questions