Demo for an SO answer

SO answer: http://stackoverflow.com/questions/12427599/creating-a-slideshow-with-variable-length-display-of-slides

by pioul

HTML

<script src="https://raw.github.com/pioul/jQuery.DIYSlider/master/jquery.diyslider.min.js"></script>
<div class="slider"><!-- The slider --> 
  <div><!-- A mandatory div used by the slider --> 
    <!-- Each div below is considered a slide --> 
    <div><img src="http://placekitten.com/g/400/300"/></div> 
    <div><img src="http://placekitten.com/g/400/200"/></div> 
    <div><img src="http://placekitten.com/g/200/300"/></div> 
    <div><img src="http://placekitten.com/g/300/200"/></div> 
    <div><p>Last Slide</p></div> 
  </div> 
</div>

CSS

body {
    background-color: #eee;
    margin: 20px;
    padding: 0;
}
.slider {
    background-color: #fff;
    height: 500px;
    margin-bottom: 20px;
}
.slider > div > div {
    border: 5px solid #222;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.slider > div > div:nth-child(even) {
    border-color: grey;
}
#counter input[type="submit"] {
    margin-left: 20px;
}
#counter input[type="text"] {
    width: 40px;
    text-align: center;
}

JavaScript

var slider = $(".slider");

// initiat the slider
slider.diyslider();

// set the first slide to last 7 seconds
setTimeout(function(){
    slider.diyslider("move", "forth");
    
    // set the other slides to last 4 seconds
    intervalId = setInterval(function(){
        slider.diyslider("move", "forth");
    }, 4000); 
}, 7000);

// stop the interval when the last slide is reached
var slidesCount = slider.diyslider("getSlidesCount");
slider.bind("moved.diyslider", function(event, slide, slideNumber, actuallyMoved){
    if(slideNumber == slidesCount) clearInterval(intervalId);
});