Basic Thumbnail Image Slider Plugin with jQuery - Thumb slider

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.