In this article, we will explain in detail how to create a responsive image slider with vertical and horizontal swipe support using one of the jQuery libraries, “jquery.sliderPro.js”.
When you right-click on a thumbnail and slide up and down with the mouse cursor, the thumbnails will slide.
We will explain with concrete code examples so that even beginners can easily understand, so please read through to the end.
Introduction
On websites, image sliders are an effective way to capture users’ attention. Especially in the modern era where responsive design is required, sliders that display beautifully regardless of the device are extremely important. jquery.sliderPro.js provides powerful tools to meet such modern demands.
Basics of jquery.sliderPro.js
jquery.sliderPro.js is a highly customizable JavaScript plugin that supports responsive design. Using this plugin, you can create slides that include not only images but also text and HTML content.
CSS Description
Load the slider-pro.min.css file. This is the CSS description for the slides and thumbnail area (#sldemo1). Modify as needed.
<link rel="stylesheet" type="text/css" href="slider-pro.min.css" media="screen"/>
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 18px;
line-height: 1.6em;
padding: 15px 0;
}
#sldemo1 .sp-thumbnail-image-container {
width: 100px;
height: 80px;
overflow: hidden;
float: left;
}
#sldemo1 .sp-thumbnail-image {
height: 100%;
}
#sldemo1 .sp-thumbnail-text {
width: 170px;
float: right;
padding: 8px;
background-color: #F0F0F0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sldemo1 .sp-thumbnail-title {
margin-bottom: 5px;
text-transform: uppercase;
color: #333;
}
#sldemo1 .sp-thumbnail-description {
font-size: 14px;
color: #333;
}
@media (max-width: 500px) {
#sldemo1 .sp-thumbnail {
text-align: center;
}
#sldemo1 .sp-thumbnail-image-container {
display: none;
}
#sldemo1 .sp-thumbnail-text {
width: 120px;
}
#sldemo1 .sp-thumbnail-title {
font-size: 12px;
text-transform: uppercase;
}
#sldemo1 .sp-thumbnail-description {
display: none;
}
}
</style>
HTML Description
Prepare thumbnails (1～3.jpg) inside the slide area (id=”sldemo1″) that can be swiped vertically and horizontally.
<h1>This is a responsive image slider page using jquery.sliderPro.js with vertical and horizontal swipe support.<br>Right-click on the thumbnail with the mouse cursor and move up and down.</h1>
<div id="sldemo1" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="1.jpg"
data-retina="1.jpg"/>
<div class="sp-caption">Thumbnail 1</div>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="2.jpg"
data-retina="2.jpg"/>
<div class="sp-caption">Thumbnail 2</div>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="3.jpg"
data-retina="3.jpg"/>
<div class="sp-caption">Thumbnail 3</div>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="1.jpg"
data-retina="1.jpg"/>
<div class="sp-caption">Thumbnail 4</div>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="2.jpg"
data-retina="2.jpg"/>
<div class="sp-caption">Thumbnail 5</div>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="3.jpg"
data-retina="3.jpg"/>
<div class="sp-caption">Thumbnail 6</div>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="1.jpg"
data-retina="1.jpg"/>
<div class="sp-caption">Thumbnail 7</div>
</div>
</div>
<div class="sp-thumbnails">
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="1.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">SP Thumbnail 1</div>
<div class="sp-thumbnail-description">Text 1<br> </div>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="2.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">SP Thumbnail 2</div>
<div class="sp-thumbnail-description">Text 2<br> </div>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="3.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">SP Thumbnail 3</div>
<div class="sp-thumbnail-description">Text 3<br> </div>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="1.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">SP Thumbnail 4</div>
<div class="sp-thumbnail-description">Text 4<br> </div>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="2.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">SP Thumbnail 5</div>
<div class="sp-thumbnail-description">Text 5<br> </div>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="3.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">SP Thumbnail 6</div>
<div class="sp-thumbnail-description">Text 6<br> </div>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img class="sp-thumbnail-image" src="1.jpg"/>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">SP Thumbnail 7</div>
<div class="sp-thumbnail-description">Text 7<br> </div>
</div>
</div>
</div>
</div>
JavaScript Description
Load jquery-1.11.0.min.js and jquery.sliderPro.js files. Write $(slide area).sliderPro({slide and thumbnail display options}).
In the slide and thumbnail display options, you can set vertical or horizontal slides, image size, position, arrow display, etc.
Here we set vertical slide (vertical).
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.sliderPro.js"></script>
<script type="text/javascript">
$( document ).ready(function( $ ) {
$( '#sldemo1' ).sliderPro({
width: 670,
height: 500,
orientation: 'vertical',
loop: false,
arrows: true,
buttons: false,
thumbnailsPosition: 'right',
thumbnailPointer: true,
thumbnailWidth: 290,
breakpoints: {
800: {
thumbnailsPosition: 'bottom',
thumbnailWidth: 270,
thumbnailHeight: 100
},
500: {
thumbnailsPosition: 'bottom',
thumbnailWidth: 120,
thumbnailHeight: 50
}
}
});
});
</script>
Responsive design is an essential element of modern web design. Through the breakpoints option, jquery.sliderPro.js makes it possible to apply different settings based on different screen sizes. This ensures an optimal view regardless of the device used.
Demo Page: Responsive Vertical and Horizontal Swipe Image Slider with jquery.sliderPro.js
If you would like to experience the slider yourself, please see the demo page below.
Demo page of responsive vertical and horizontal swipe image slider with jquery.sliderPro.js
Source: slider-pro
Conclusion
By using jquery.sliderPro.js, you can easily implement beautiful image sliders that can be freely swiped vertically and horizontally.
Once you master the basic usage introduced in this article, you will be able to handle even more complex functions. Try customizing it to fit your own website.
We hope this article provides useful information for your web development. For those considering introducing an image slider, we believe it will help create a more attractive and user-friendly site.
※ Please use at your own risk when reusing.
Do not reuse the Google Analytics tag inside the head tag of the demo page.
