Basic Thumbnail Image Slider Plugin with jQuery - Thumb slider
File Size: | 494 KB |
---|---|
Views Total: | 10952 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Thumb slider is a tiny and fast jQuery gallery plugin which allows to navigate through a group of images with a thumbnail control. Great for use in the E-commerce website to showcase details about the products.
Basic usage:
1. Put jQuery library and the jQuery thumb slider plugin at the bottom of the html document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/thumb_slider.js"></script>
2. Add large images & thumbnails into the slider.
<div id="slider-container"> <div class="slides"> <div class="slide"> <img src="large-1.jpg" alt="" /> </div> <div class="slide"> <img src="large-2.jpg" alt="" /> </div> <div class="slide"> <img src="large-3.jpg" alt="" /> </div> </div> <div class="controls"> <span class="control"> <img src="thumb-1.jpg" alt="" /> </span> <span class="control"> <img src="thumb-2.jpg" alt="" /> </span> <span class="control"> <img src="thumb-3.jpg" alt="" /> </span> </div> </div>
3. Initialize the plugin by calling the function on the top container.
$('#slider-container').thumb_slider();
4. Optionally, you can add transparency to unclicked controls / opacity to active thumbs.
#slider-container .control { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } #slider-container .control.active { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
Changelog:
2020-07-20
- Code formatting.
This awesome jQuery plugin is developed by mlmedia. For more Advanced Usages, please check the demo page or visit the official website.