Finally, an image slider/carousel which is mostly CSS

Some of you will have seen CSS carousels which look pretty darn awful. Others will have seen JavaScript/jQuery carousels which are heavy monsters raised from the bed of the titanic, summoned to destroy mobile and turn on CPU fans across the globe. All we want to do is slide between some images, smoothly. Is that really too much to ask?

The fact that @peduarte happens to be a good mate is irrelevant when it comes to highlighting this piece of genius he's made. I've been itching for a responsive, lightweight carousel/slider for bloody ages before this came along. Pedro has implemented the original version in vanilla JavaScript which should be the aim for any initial release of a frontend component. I've simply converted it to an AngularJS directive.

Demo

Here's a few snaps from me and Pedro's little trip to Frontend Bros in Bologna in the summer!

current slider index: {{currentSliderIndex}}

Download

How is it different?

In short, here's a summary of why Wallop Slider is truly one of the best carousels/sliders you're likely to find:

  • All animations done via CSS
    This means hardware accelleration, and performance on mobile is amazing.

  • Viewport resizes? No additional code gets executed. It's fully responsive.
    It's responsive via CSS, no intensive scripts keeping track of the combined slide widths, or re-rendering controls. JavaScript is pretty much only involved in the initialization, all CSS thereafter!

  • Animations not supported? It falls back by default!
    The slides will simply change instantly if CSS animations are not supported. Graceful degradation is taken care of, and we're talking about old, old browsers. The kind of browsers where people have never seen anything sliding. EVER.

  • Really simple to setup with AngularJS, or vanilla JavaScript.
    I'm not one to encourage using plugins willy-nilly, but if you're using AngularJS already, I've aimed to make this as lightweight as possible. Check out the original codebase to find vanilla JavaScript examples.

AngularJS Setup Instructions

  1. Include the wallopSlider directive in your application.
  2. Include the core CSS, and any animation CSS for the transitions between slides.
  3. Specify the <wallop-slider> tag, and set the images property to an array of image URLs in the current scope.
    See the JS Bin demo for examples of how to use all the options.

Standalone JS Bin Demo

Here's a completely standalone demo of the directive in action.

If you learn best by example, this is definitely the way for you to go.

HTML

Simply include the wallop slider tag, set the images attribute to bind to an array of image URLs, and the animation attribute to to reference an animation defined in the CSS.

<wallop-slider
    data-images="images"
    data-animation="rotate"
    data-current-item-index="currentSliderIndex"></wallop-slider>
            

JavaScript


angular.module('MyApp', [])

.controller('MainCtrl', function($scope) {

  // bound to the current slider index
  $scope.currentSliderIndex = 0;

  // the image sources for the slides
  $scope.images = [
    'http://distilleryimage9.ak.instagram.com/6113581809eb11e39e3522000a9f18ab_7.jpg',
    'http://distilleryimage4.ak.instagram.com/e27029bc1d4211e3852e22000ae90903_7.jpg',
    'http://distilleryimage3.ak.instagram.com/67345d703be411e3b3da22000aa804fa_8.jpg'
  ];

});
            

CSS

Include the core CSS, and any optional animations from here (e.g. wallop-slider--rotate.css, which is what I've used on this page).

.wallop-slider {
  width: 100%;
}

.wallop-slider__list {
  list-style: none;
  position: relative;
  overflow: hidden;
}

.wallop-slider__item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.wallop-slider__item img {
  display: block;
  width: 100%;
}

.wallop-slider__item--current {
  display: block;
  position: static;
}
            

Summary

There you have it. A responsive, lightweight, smooth carousel, which doesn't weigh a ton of bricks! Hit me or Pedro up with any questions on Twitter, details below!

Hi, I'm Andy Shora. I'm a Frontend Web Developer based in London and I currently work with some very talented people over at R/GA. On the side, I recently built Stackey and The City Awards.

This is Pedro Duarte, he's a Frontend Developer at R/GA London, and an expert in CSS. You can follow him @peduarte.