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.

<body>
<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=”ResponsiveSlides/responsiveslides.css”>
<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.



DEMO

DOWNLOAD

Leave a Reply