Responsive Image Slideshow using jQuery

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.

project-light-on-slide

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. 

View Demo

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>

Responsive Image SlideShow Output

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.

responsive-image-slide-show-output

View DemoDownload

This jQuery code tutorial was published on January 17, 2018.

↑ Back to Top