Vertical Thumbnail Image Slider with jQuery

Yet another slider plugin for jQuery that helps you to create vertical thumbnail image slider. The plugin creates horizontal image slider and vertical thumbnail slider with it. This plugin comes with beautiful interface for sliding images. User can easily navigate next and previous images through iconic buttons. It also has dots and thumbnail navigation.

Further more, if user clicks on slider image it will show in a lightbox. The plugin also support image zooming with custom zoom cursor.

Plugin Overview

Plugin: Horizontal Vertical Slider
Author: Thiwanka Dodanwela
Licence: MIT Licence
Published: August 31, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and jQuery UI 1.2.1 or Latest.
File Type: zip archive (HTML, CSS JavaScript and Images )
Package Size: 998 KB

How to Make 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 slider‘s CSS and JavaScript file just after jQuery library.

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

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

3. Now, create HTML structure for your slider gallery, add your image links in 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 initialized (active) after including its all assets. So there is no need extra manual coding.