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