javascriptjquerytimersliderjquery-slider

How to pass and set the slider image display time in jQuery?


I've used one image slider. The HTML and jQuery code for it is as follows :

HTML code :

<div class="leaderboard">
  <ul id="demo1">
    <li><a href="#slide1"><img src="img/Slid1.png" alt="Lorem Ipsum"></a></li>
    <li><a href="#slide2"><img src="img/Slid2.png"  alt="Lorem Ipsum"></a></li>
    <li><a href="#slide3"><img src="img/slid3.png" alt="Lorem Ipsum"></a></li>
  </ul>
</div>

jQuery code :

$(function() {
  var demo1 = $("#demo1").slippry({
    transition: 'fade',
    useCSS: true,
    speed: 1000,
    pause: 3000,
    auto: true,
    preload: 'visible'
  });
  $('.stop').click(function () {
    demo1.stopAuto();
  });
  $('.start').click(function () {
    demo1.startAuto();
  });
  $('.prev').click(function () {
    demo1.goToPrevSlide();
    return false;
  });
  $('.next').click(function () {
    demo1.goToNextSlide();
    return false;
  });
  $('.reset').click(function () {
    demo1.destroySlider();
    return false;
  });
  $('.reload').click(function () {
    demo1.reloadSlider();
    return false;
  });
  $('.init').click(function () {
    demo1 = $("#demo1").slippry();
    return false;
  });
});

The necessary jQuery and CSS files have been already included.

This image slider is working perfect for me. But now I want to set some value in seconds (say for example 5 seconds. This is a variable value, it can be other than 5 seconds too.) for which each image from this slider appears. In other words I want to display each image for 5 seconds, as soon as 5 seconds are completed the next image should come.

How should I pass this value of 5 seconds to the above jQuery slider function and use this value into a function such that each image from slider will appear for 5 seconds?

Thanks for spending some of your valuable time in understanding my issue. If you need any more information regarding this issue please let me know.

Any kind of hep would be highly appreciated. Waiting for your precious replies.


Solution

  • for the slide to last 5s change the value

    var demo1 = $("#demo1").slippry({
        transition: 'fade',
        useCSS: true,
        speed: 1000,
        pause: 5000,// changed from 3000(3s) 
        auto: true,
        preload: 'visible'
    });
    

    you can get more information here http://slippry.com/settings/

    Edit 2

    you will need to do something like this

    JS Fiddle