Responsive Slider using jQuery
In this blog, I am going to explain how we can create a responsive slider. I have used ResponsiveSlides.js to create responsive slider. This is a jQuery Plugin that makes our job easy to create a slider.
We can use this slider to showcase your favourite photos in a banner.
Slider Images
Below is a code to shows the list of HTML image tags inside a slider container element. The slider container element reference is used to initialize the ResponsiveSlides.js library to run the slideshow for the images.
<div id=”wrapper”>
<div class=”responsive-slider”>
<ul class=”respslides” id=”slider”>
<li>
<img src=”images/img1.jpg” alt=””>
<p class=”caption”>Sun Set</p>
</li>
<li>
<img src=”images/img2.jpg” alt=””>
<p class=”caption”>Flowers</p>
</li>
<li>
<img src=”images/img3.jpg” alt=””>
<p class=”caption”>Flowers picture</p>
</li>
<li>
<img src=”images/img4.jpg” alt=””>
<p class=”caption”>Rose</p>
</li>
</ul>
</div>
</div>
</body>
Initialize ResponsiveSlidesjs to Start SlideShow
Below code will call the responsiveSlides() function with the reference the slider container element id. By invoking this function the ResponsiveSlides plugin is initialized with the set of options.
<link rel=”stylesheet” href=”style.css”>
<script src=”jquery-3.2.1.min.js”></script>
<script src=”ResponsiveSlides/responsiveslides.min.js”></script>
<script>
$(function () {
$(“#slider”).responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: “slider-callback”,
maxwidth: “550px”
});
});
</script>
Responsive Image SlideShow Output
Below is the screenshot shows the responsive image slideshow.
About Author
bestonetechnologies
I am a software developer.
