demos: 012345678

Demo 4 - Image Slider with Navigation Buttons

In Demo 1 and Demo 2, we have introduced two ways of navigation: the built-in Navigation Bullets and the Thumbnails.

This demo introduces another type of navigation - Navigation Buttons.

The full source code of this demo is in the "Download" link from the page Menucool Javascript Image Slider.

We are going to build two groups of Navigation Buttons, the Previous and Next button on both sides of the slider, and the Previous, Next, Play/Pause buttons inside the thumbnails bar.


Group 1: The Previous and Next buttons on both sides of the slider

  1. HTML:

    <div class="group1-Wrapper"> <a onclick="imageSlider.previous()" class="group1-Prev"></a> <a onclick="imageSlider.next()" class="group1-Next"></a> </div>

  2. CSS:

    In the js-image-slider.css source file, you will find their style code under the comment line:

    /*----------- navigation buttons on both sides of the slider -----------*/

Group 2: The Previous, Next, Play/Pause buttons inside the thumbnails bar

  1. HTML:

    <div id="thumbs"> <a onclick="imageSlider.previous()" class="group2-Prev"></a> <a id='auto' onclick="switchAutoAdvance()"></a> <a onclick="imageSlider.next()" class="group2-Next"></a> ... ... </div>

  2. JavaScript:

    Add the following script to the bottom of the page:

    <script type="text/javascript"> function switchAutoAdvance() { imageSlider.switchAuto(); switchPlayPauseClass(); } function switchPlayPauseClass() { var auto = document.getElementById('auto'); var isAutoPlay = imageSlider.getAuto(); auto.className = isAutoPlay ? "group2-Pause" : "group2-Play"; auto.title = isAutoPlay ? "Pause" : "Play"; } switchPlayPauseClass(); </script>

  3. CSS:

    Their style codes can be found in the js-image-slider.css source under the comment line:

    /* ----------- navigation buttons in the thumbnails bar ---------- */

Built-in JavaScript Functions

You may have noticed some JavaScript functions in above codes such as: imageSlider.previous(), imageSlider.getAuto(), ...
They are all the slider's built-in functions that come handy for developers to add additional functionality:
  • previous()   - Display previous slide
  • next()   - Display next slide
  • getAuto()   - Get current slideOptions.autoAdvance setting
  • switchAuto()   - Toggle the slideOptions.autoAdvance setting
  • displaySlide(indexNumber)   - Display a slide
  • reload()   - re-initialize the slider. It helps to build the slider on the fly (after page load), or to update the slider dynamically.
  • changeOptions(newOptions)   - Change sliderOptions. For example: imageSlider.changeOptions({ effect: "13", autoAdvance: false });
The slider also has two built-in event handlers that can be used to perform extra tasks:
  • beforeSlideChange   - Event happens before starting a slide. For example: function beforeSlideChange(args) { //args[0]-next slide index, args[1]-next image, //args[2]-next caption, args[3]-next effect theStatusElement.innerHTML = 'Effect: ' + args[3]; }
  • afterSlideChange   - Event happens after a slide. For example: function afterSlideChange(args) { //args[0]-currentSlide index, args[1]-currentImage theStatusElement.innerHTML = 'Displayed Slide: ' + args[0]; }

This demo contains no advanced features of the Javascript Image Slider. It is free to use; license is not required.

▲