Responsive Image Slideshow using jQuery
by Vincy. Last modified on July 12th, 2022.
Image slideshow is the best way of presenting photos that we want to showcase. In this tutorial, I created the image slideshow which is responsive to the various view port by scaling up / down based on the screen size.
I used ResponsiveSlides.js for creating responsive image slideshow. This is a jQuery plugin which makes our job simple to add the image slider with fluidity.
You can use this responsive slideshow to showcase your favourite photos in a blog banner, to add portfolio slider or to show best seller of your own online shop. Previously, we have seen several jQuery examples for image slideshow using core jQuery library.
This screenshot shows the responsive image slideshow. The slider window in the below screenshot has the navigation links in the left and the right side which are used to navigate the image slides back and forth.
Slider Image List HTML
The below code 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.
In this slideshow example, I have added caption for each image slide.
<div class="responsive-slider">
<ul class="rslides" id="slider4">
<li><img src="images/cream-shake.jpg" alt="">
<p class="caption">Chocolate Milkshake with Ice Cream</p></li>
<li><img src="images/sweets-cherries.jpg" alt="">
<p class="caption">Sweets and Cherries</p></li>
<li><img src="images/fruity-orange-ice-cream.jpg" alt="">
<p class="caption">Fruity Orange Ice Cream</p></li>
<li><img src="images/ice-cream.jpg" alt="">
<p class="caption">Ice Cream with Fruit Salad</p></li>
<li><img src="images/sweets.jpg" alt="">
<p class="caption">Arabian Sweets and Desserts</p></li>
</ul>
</div>
Initialize ResponsiveSlidesjs to Start SlideShow
This jQuery script invokes 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.
In this example, I set some options while initializing the ResponsiveSlides for setting the slider max-width, enabling previous next navigation and many.
<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>
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.