Vertical Thumbnail Image Slider with jQuery

Another jQuery plugin to create a vertical thumbnail image slider with writing the code from search. Simply add a few basic files and you are done.

It’s a lightweight plugin to create thumbnail slider. It allows you to make the slider horizontal or vertical with thumbnail. The interface is beautiful for sliding photos.

Currently, this jQuery slider didn’t support content for adding photo description or title but you can customize it to make work. Its work well on mobile devices. The users can easily navigate the images by using the next and previous button.

The slider also has dot navigation options which can be used to navigate the images. Furthermore, By clicking on each thumbnail, the user can easily see the next image.

In addition, the slider comes with the awesome function of a lightbox. When the user clicks on slider main photo it will show the image in the lightbox with a bigger version.

That’s not ended. The slider also supports Zooming functionality. It comes with custom zoom cursor function and when the user clicks the part of the image it Zoom-in image for details view.

How to Make jQuery Vertical Thumbnail Image Slider

Let’s get started by loading the jQuery and UI files into the head tag of your HTML document. You don’t need to serve the files from your server and can add CDN links.

<!-- 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>

Next, you also need to include the slider CSS and Javascript files just right after the jQuery Library.

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

It’s time to make the HTML structure for the thumbnail slider gallery to add your images.

<div
      class="horVerSlider"
      data-desktop="800"
      data-tabportrait="600"
      data-tablandscape="600"
      data-mobilelarge="375"
      data-mobilelandscape="500"
      data-mobileportrait="375"
    >
  <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>

Handling Option

The plugin comes with some of the handy optoins which allow you to customize it. The great thing about its option you don’t need to edit the Javascript.

It allows you to set the option by using the data attribute. You can add/remove or change the value of options from the main container div(horVerSlider Class).

<div
  class="horVerSlider"
  data-desktop="800"
  data-tabportrait="600"
  data-tablandscape="600"
  data-mobilelarge="375"
  data-mobilelandscape="500"
  data-mobileportrait="375"
>

That’s it. This slider plugin doesn’t require to initialize function to active it. It does automatically, all you have to include all the assets as mention in this article.

Furthermore, Any kind of plugin didn’t come just as per your requirement and you may need few of customization to make it fit according to your design need.

This plugin coding is very clean and written in a simple manner. You can go through the horizontalvertical.css file and customize its design.