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. 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 :)