Demo 5 - Make thumbnails semi-transparent

Adding a semi-transparent effect to the thumbnails can be easily implemented via the CSS class: .thumb and .thumb-on:

    #thumbs .thumb img{ opacity:0.6;filter:alpha(opacity:60); }
    #thumbs .thumb-on img{ opacity:1;filter:alpha(opacity:100);}

The full source code is included in the "Download" on the page Menucool Javascript Image Slider.

If there are lots of thumbnails and the containing block does not have enough room to show them, you can consider showing the thumbnails in multiple columns or rows. Another solution is to make the slider work together with Menucool Thumbnail Slider. Please visit Image Slideshow with horizontal thumbnails and Image Slideshow with vertical thumbnails.

This demo requires a JavaScript Image Slider license for supporting the thumbnails features.