CODEWITHSUNDEEP
javascriptjqueryhtml
Tioneb
Tioneb

Reputation: 119

Make the first slide of a JS slideshow last longer

I have this little slideshow script (using along the jquery cycle plugin http://jquery.malsup.com/cycle/options.html) :

$(document).ready (function(){
$('#banner .slides').cycle({
    slideExpr: ' .slide',
    cleartypeNoBg: ' true' ,
    fx: 'fade',
    timeout: 4000,
    fit: 1,
    prev:   '.previous-btn', 
    next:   '.next-btn', 
    width:890
});

Along with the html:

<div id="banner">
  <div class="wrapper">
    <div class="slides">
     <div class="slide slide1 group" id="slide1">1</div>
     <div class="slide slide2 group">2</div>
     <div class="slide slide3 group">3</div>
     <div class="slide slide4 group">4</div>
    </div>
  </div>
</div>

I would like to get the first slide of the slideshow last longer (8000 for example). I'm not terribly useful when it comes to JS so hopefully someone can help :)

Upvotes: 0

Views: 185

Answers (2)

Todd
Todd

Reputation: 5454

add a custom timeout: 

$(document).ready (function(){

    $('#banner .slides').cycle({
        slideExpr: ' .slide',
        cleartypeNoBg: ' true' ,
        fx: 'fade',
        timeout: 4000,
        fit: 1,
        prev:   '.previous-btn', 
        next:   '.next-btn', 
        width:890,
        timeoutFn: customTimeout // here
    });

});

function calculateTimeout(cur, next, opts, isForward) { 
    var index = opts.currSlide; 
    return index == 0 ? 2000 : false;
    // note that returning false will revert to default timeout length 
}

Upvotes: 1

yoleg
yoleg

Reputation: 381

You can use a custom timeout to specifically target the first slide with the id "slide1".

$(document).ready (function(){
  $('#banner .slides').cycle({
  slideExpr: ' .slide',
  cleartypeNoBg: ' true' ,
  fx: 'fade',
  timeout: 4000,
  fit: 1,
  prev:   '.previous-btn', 
  next:   '.next-btn', 
  width:890,
  timeoutFn: calculateTimeout
});

function calculateTimeout(currSlideElement, nextSlideElement, options, forwardFlag){
  if(currSlideElement.id === "slide1"){
     return 8000;
  } else {
     return 4000;
  }
}

Something like that should work.

Upvotes: 5

Related Questions