Demo 2: Responsive Thumbnail Slider

Responsive Layout

This thumbnail slider is configured to be responsive:

• The entire image gallery will always fit the browser screen when the browser screen is smaller
• Each thumbnail will scale to a smaller size when decreasing the browser window
• The gallery can have a max-width (900px in this demo)

The responsive feature is set by the following config:

• Stylesheet

  #thumbnail-slider { width:100%; max-width:900px; }

• JavaScript

  var nsOptions = { ... thumbWidth: "50%",//As the thumbHeight is set to "auto", this 50% is the percentage //of the gallery viewport width. thumbHeight: "auto", showMode: 3, //Then the active thumbnail always stays in the center of the gallery ... }
  • If you need displaying more thumbnails in the viewport, update the thumbWidth with a smaller value, e.g.: { thumbWidth:30%; } or { thumbWidth:260px; }.
  • If giving the thumbWidth a pixel width(e.g. "120px") other than the percentage, the viewport will still adapt to the screen size, but the thumbnails will stick to their pixel size.

Config Styles

This thumbnail slider needs just a few styles added to your stylesheet:

• Expand/Shrink Effect

  The active thumbnai is enlarged(1.15) and others are shrinked(0.9). This is set by the transform:scale property in the style sheet.

• Shadow Reflection

  The shadow reflection under each thumbnails is defiend by the -webkit-box-reflection property in the style sheet. It only works with Chrome, Safari, and Android browsers. It won't be seen with other browsers.

  Notice: we have set #thumbnail-slider ul li { margin-top:80px; margin-bottom:80px; } to make the reflection always visible within the gallwery frame.

• 3D Effect

  If you dislike the 3D effect, just remove the code between the comment line /*-- Start 3D --*/ and /*-- End 3D --*/ in the style sheet.

More Info

• Full documentation: jQuery Slider
• Questions & Answers: Posts in the forum