Demo 4: Flickr-style Slideshow

Let's create a Flickr-style image slideshow using Ninja Slider and Thumbnail Slider.

HTML

<div id="ninja-slider">
    <div class="slider-inner">...</div>
</div>
<div id="thumbnail-slider">...</div>

Or: include the thumbnail carousel inside the Ninja Slider (this approach keeps the carousel visible even in fullscreen mode):

<div id="ninja-slider">
    <div>
        <div class="slider-inner">...</div>
        <div id="thumbnail-slider">...</div>
    </div>
</div>

JavaScript:

var nsOptions = {
    ......
    autoAdvance: false,
    keyboardNav: true,
    before: function (currentIdx, nextIdx, manual) { 
        if(manual && typeof mcThumbnailSlider!="undefined") 
            mcThumbnailSlider.display(nextIdx);
    }, //This before callback function ensures that manual navigation actions in Ninja Slider will rotate the Thumbnail Slider in sync.
    ......
}

var thumbnailSliderOptions = {
    ......
    autoAdvance: false, //set it to true if auto advance is desired
    showMode: 3, //or 2. Both are suitable for synchronized operation with another slider.
    selectable: true, //Highlight the active thumbnail
    thumbWidth: "auto", //allows varying width
    thumbHeight: "70px", //fixed height
    keyboardNav: false,  //use Ninja Slider's keyboaredNav instead             
    before: function (currentIdx, nextIdx, manual) { 
        if (typeof nslider != "undefined") nslider.displaySlide(nextIdx); 
    }, //let Thumbnail Slider control the Ninja Slider for synchronization
}

Note: If you want the slider to auto-advance, configure the Thumbnail Slider option: autoAdvance: true.

Styles

Some styles for the ninja slider:

/* Limit the size of the Ninja Slider in fullscreen mode */
#ninja-slider.fullscreen div.slider-inner { 
    max-width:900px; max-height:80%; 
}
/* move the arrow buttons outside the Ninja Slider when in fullscreen mode */
#ninja-slider.fullscreen #ninja-slider-prev {left: -50px;}
#ninja-slider.fullscreen #ninja-slider-next {right: -50px;}

/*Hide the arrow buttons on mobile devices, as users can navigate by touch or swipe.*/
@media only screen and (max-width:500px){
    #ninja-slider-prev, #ninja-slider-next { display:none; }
}

Some styles for the thumbnail slider:

/* when thumbnail slider is not hovered */
#thumbnail-slider {transform:scale(0.7); opacity:0.8;} 
/* when hovered */
#thumbnail-slider:hover {transform:scale(1); opacity:1;} 
/*Highlight the active thumbnail*/
#thumbnail-slider ul li.active { border-color:white;}