ResponsiveSlides.js

I created this plugin while I were developing my own site and decided few days ago to release it as an open source version. Its basic function is to create responsive slideshow using images inside a container. The interesting thing is, that this is actually the very first JavaScript plugin I’ve done and that’s why I thought that I should write down some notes while I’m at it.

Basics first #

Let’s start with the Markup and CSS. I used the same markup which I used on blog.kiskolabs.com as the foundation for this plugin, but I wanted to make it a bit better this time. The problem with my previous version was that if there was any content below the slideshow, you had to change the height between Media Query triggerpoints for it to work properly. Now we don’t have to specify/calculate height anymore, so this scales really smoothly.

HTML: #

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

CSS: #

#slides {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  width: 100%;
}

img {
  position: absolute;
  height: inherit;
  width: 100%;
  left: 0;
  top: 0;
}

.img_visible {
  position: relative;
  float: left;
}

The markup is really simple: you only need one container and few images inside that. Max-width on the container isn't necessary, but we might want to prevent images scaling too much.

The last img_visible class in CSS fixes the height problem I mentioned earlier. It’s basically applied to a slide when it fades in and removed when it fades out. The idea for using position: relative on visible slide came from a comment on the previous blog post. float: left makes the fix also work on IE6.

That part is pretty straightforward, but what about JavaScript?

Making it a plugin #

There’s a pretty good tutorial on docs.jquery.com about writing your own plugins. It’s a good place to start if you are interested to learn how it works. After you become familiar with the concept you can try something simple first and build up from there.

I had three things in my mind when I started doing this. First, it should scale smoothly without any glitches, second, the whole plugin should be very light in file size and third, I wanted to avoid feature bloat. Because of the second and the third thing there isn’t very many options you can customize and I didn’t even plan to include much more in the future.

Hooking it up: #

$("#slides").responsiveSlides({
  auto: true,           // Boolean: Animate automatically, true/false
  speed: 1000,          // Integer: Speed of the transition, in ms
  timeout: 4000,        // Integer: Time between transitions, in ms
  pager: false,         // Boolean: Show pager, true or false
  nav: false,           // Boolean: Show navigation, true or false
  prevText: "Previous", // String: Text for the "previous" button
  nextText: "Next",     // String: Text for the "next" button
  maxwidth: "none",     // Integer: Max-width of the slideshow, in px
  controls: "",         // Selector: Where controls should be appended
  namespace: "rslides"  // String: change the default namespace used
});

Was it worth it? #

I think it was. I learned a ton about jQuery plugins + now I have something to use with new projects. I do know though, that there’s still a lot of things that I could probably do better, but given the time that I used for the development, I’m satisfied with the results. See the plugin in action on it’s homepage and check out the repository on GitHub. ❦

Update: Decided to change the name “AdaptiveSlides.js” to “ResponsiveSlides.js”. That just makes more sense here.

Update 2: I changed the markup to use unordered lists. Check out the new version.

Share