Flickr-like Slideshow

Let's create a Flickr-like image slideshow with the Ninja Slider and the Thumbnail Carousel.

Visit Ninja Slider to download this demo or purchase license.

The Thumbnail Carousel will pop out when hovered. It is simply implemented by thumbnail-slider.css ( it is the first two lines of code when clicking here. Just remove those codes if you dislike it. )

Ninja Slider

HTML:
Click the slider's fullscreen button in the demo above, you will notice that the thumbnail slider is also included in the fullscreen window. We accomplish this by adding an extra DIV wrapper within the Ninja Slider, and the Thumbnail Slider was added into the wrapper:
<div id="ninja-slider"> <div> <div class="slider-inner">...</div> <div id="thumbnail-slider">...</div> </div> </div>
If you don't want to include the Thumbnail Slider in the fullscreen, just don't add the code in red color into the Ninja Slider.
JavaScript:
Set the options as: { autoAdvance: false, keyboardNav: true, before: function (currentIdx, nextIdx, manual) { if(manual && typeof mcThumbnailSlider!="undefined") mcThumbnailSlider.display(nextIdx);}, //Clicking the arrow buttons or press the keyboard arrow keys will drive the Thumbnail Slider ...... }

Notice: The Ninja Slider is driven by the Thumbnail Slider. So it is important to set autoAdvance: false. If you prefer the auto scrolling, you can set it through the Thumbnail Slider's option: autoAdvance: true.
Stylesheet:
/* To move the arrows buttons out of the Ninja Slider when in fullscreen: */ #ninja-slider.fullscreen #ninja-slider-prev {left: -50px;} #ninja-slider.fullscreen #ninja-slider-next {right: -50px;} /*Hide the arrow buttons on mobile phones as users can nav by touch/swipe*/ @media only screen and (max-width:500px){ #ninja-slider-prev, #ninja-slider-next { display:none; } }

Limit the size of the Ninja Slider in fullscreen: #ninja-slider.fullscreen div.slider-inner { max-width:900px; max-height:80%; }

Thumbnail Slider

Markup:
The image can be thumbnails, or just the big-size image as this demo did. The image size can be scaled to any size via the options in the thumbnail-slider.js as shown below.

Notice the number of <li>s in the two sliders must be the same.
JavaScript:
Options:
showMode: 3, //or 2. Both are suitable for working with another slider showing the details 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); }, //The Thumbnail Slider drives the Ninja Slider
Notice: If you have set the option: autoAdvance: true, you cannot set the showMode to 1 or 4 as some thumbs under these show modes will be skipped over during the scrolling.
Stylesheet: #thumbnail-slider {transform:scale(0.7); opacity:0.8;} /*dormant*/ #thumbnail-slider:hover {transform:scale(1); opacity:1;} /*awake*/ #thumbnail-slider ul li.active { border-color:white;} /*Highlight the active thumbnail*/ #thumbnail-slider .thumb { background-size:contain; } /*You can also set: {background-size:cover;} to leave no blank area if the image has a different aspect ratio.*/

That's it! Now the Flickr-like Image Slideshow is there for you.

License

If you are using this template, you just need a Ninja Slider license. You can apply the license to both the Ninja Slider and the jQuery Slider

More Info

Another similar template: Image gallery with vertical thumbs
Full documentation: Ninja Slider
Questions & Answers: Posts in the forum