Vertical Thumbnail Image Slider with jQuery

Yet another slider plugin for jQuery that helps you to create a vertical thumbnail image slider. The plugin creates a horizontal image slider and a vertical thumbnail slider with it. This plugin comes with a beautiful interface for sliding images. Users can easily navigate the next and previous images through iconic buttons. It also has dots and a thumbnail navigation.
Furthermore, if the user clicks on the slider image it will show in a lightbox. The plugin also supports image zooming with a custom zoom cursor.

How to Create jQuery Vertical Thumbnail Image Slider

1. Load jQuery and jQuery UI by adding CDN links into head tag of your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. After that, also include the slider‘s CSS and JavaScript file just after the jQuery library.

<!-- Slider CSS -->
<link href="css/horizontalvertical.css" rel="stylesheet" />

<!-- Slider JS -->
<script src="js/horizontalvertical.js"></script>

3. Now, create an HTML structure for your slider gallery, add your image links to it, and done.

<div
   class="horVerSlider"
   data-desktop="800"
   data-tabportrait="600"
   data-tablandscape="600"
   data-mobilelarge="375"
   data-mobilelandscape="500"
   data-mobileportrait="375"
   >
   <div class="wishlist">
      <span class="heart"></span>
   </div>
   <div class="close"></div>
   <div class="vertical-wrapper">
      <div id="vertical-slider">
         <ul>
            <li
               data-image="images/1.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/2.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/3.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/4.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/5.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/6.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/7.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/8.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
         </ul>
      </div>
   </div>
   <div class="horizon-wrapper ">
      <div class="horizone-nav">
         <div class="prev" style="display: none;">
            <img src="images/leftarrow.svg" />
         </div>
         <div class="next" style="display: block;">
            <img src="images/rightarrow.svg" />
         </div>
      </div>
      <div id="horizon-slider" class="zoomin zoomenable zoomed">
         <ul style="width: 6000px; height: 600px; left: 0px; top: 0px;">
            <li
               data-image="images/1.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/2.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/3.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/4.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/5.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/6.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/7.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
            <li
               data-image="images/8.jpg"
               class="ui-draggable ui-draggable-handle ui-draggable-disabled"
               ></li>
         </ul>
      </div>
      <div class="dots">
         <div class="dotwrap"></div>
      </div>
   </div>
</div>

Note: The slider plugin will automatically initialize (active) after including its all assets. So there is no need for extra manual coding.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.