Vertical Thumbnail Image Slider with jQuery

Vertical Thumbnail Image Slider with jQuery
Code Snippet:Horizontal Vertical Slider
Author: Thiwanka Dodanwela
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 13,903
License: MIT
Edit Code online: View on CodePen
Read More

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.

1 thought on “Vertical Thumbnail Image Slider with jQuery”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...