Responsive jQuery Slideshow

This example makes it possible to have a fluid jQuery slideshow which scales responsively. This is the same method that I used on the new kiskolabs.com.

I am using Jonathan Snook’s Simple jQuery Slideshow in this example, but you could really use any JavaScript solution with this HTML/CSS combo. I think it’s easiest if I just show the source code and provide live example for you to try out.

HTML: 

<div id="slideshow">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
</div>

CSS: 

#slideshow {
  width: 100%;
  position: relative;
}

img {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 600px;
  height: auto;
  position: absolute;
}

JavaScript: 

$(function () {
	// Simplest jQuery slideshow by Jonathan Snook
	$('#slideshow img:gt(0)').hide();
	setInterval(function () {
		$('#slideshow :first-child').fadeOut(1000)
			.next('img').fadeIn(1000).end().appendTo('#slideshow');
	}, 4000);
});

That’s everything required.

Update:

I made an updated version of this, read the new blog post here and check out the plugin here: responsiveslides.com.

Written by Ariel Salminen.

Ariel Salminen.

Get in Touch

Does your team need help? I’m Ariel Salminen, a Design Systems Architect specialized in helping organizations build and maintain design systems. I’m available for both local and remote projects around the world.

Keyboard Shortcuts