Sterling HTML – Autoplay (auto-play) Slider

Posted in: ,

Overview:

In this tutorial we’re going to provide instructions on how to modify the Sterling HTML Website Template so that the jQuery Slider will Autoplay (auto-play) without any interaction from the end-user.

Great News! This modification is really quite simple….full instructions outlined below:

Instructions:

  1. Open the HTML page template which contains the slider that you’d like to autoplay. (page-template-homepage-jquery.html) You will be opening this page template in your code editor of choice.
  2. Scroll to the bottom of the document and you will see the following code:
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('#slides').slides({
    preload: false,
    //preloadImage: 'preloader url here',
    autoHeight: true,
    effect: 'slide',
    slideSpeed: 500,
    play: 0,
    randomize: false,
    hoverPause: false,
    });
    });
    </script>
  3. To enable autoplay you’ll simply want to modify the “play: 0″ parameter listed above. Replace “0” with any number and autoplay will be activated.
    This number represents the number of seconds that each slide is displayed before “auto-playing” to the next slide. This number is in milliseconds.
    For example:
    1 second = 1000
    5 seconds = 5000
    10 seconds = 10000
    (we recommend somewhere in the 4000 to 8000 range)
    Here’s an example:
    play: 6000


  4. That’s all. Save your HTML file and rejoice :)