Slide Carousel

A carousel plugin to rotate through a collection of slides.

My clients have, seemingly en masse, expressed a need for a slideshow of content. Having built three in the past few weeks, when my fourth request came in I decided to write a plugin to address the growing demand. Here is my result.

I’m rather proud of it. Completely standalone, it doesn’t pollute the namespace, but remains fully configurable by passing an object through the arguments. It needs only a container and elements to cycle — the controls are dynamically generated but fully customizable via classes. The effect is generated by moving the individual slide to the immediate left or right of the viewport, then sliding in. Basic z-index stacking takes care of the visuals, and re-appending the slide to the container makes way for the next slide.

What’s Next

I’m curious to see what additional needs arise of this carousel when I start setting it into the wild. I’m already planning my next update though.

  • More callbacks

    I support callbacks on each slide transition, but I would like to also attach them to the controls.

  • Class name independence

    The plugin currently depends on the slides having a common classname registered with the plugin. Implementation would be slightly easier if the plugin simply grabbed whatever elements were inside the container.

  • Control clipping

    The slide in effect is dependent on the container being set to overflow:hidden. Unfortunately, this also means the left/right controls are limited to being within the container. That’s not a design constraint that will fly long.