Wallop Slider

Another bloody slider, I know... but this one's different.

Benefits:

I wrote a more detailed section about how WallopSlider works at the bottom of this page, but here's an overview:

Download

Download the WallopSlider files here. Alternatively, have a look at the GitHub page here.

Usage:

Basic


<head>
  <!-- Include CSS -->
  <link rel="stylesheet" href="path-to-wallop-slider.css">
</head>
      

<div class="wallop-slider">
  <ul class="wallop-slider__list">
    <li class="wallop-slider__item wallop-slider__item--current">
      <img src="path-to-image">
    </li>
    <li class="wallop-slider__item">
      <img src="path-to-image">
    </li>
    <li class="wallop-slider__item">
      <img src="path-to-image">
    </li>
  </ul>
  <button class="wallop-slider__btn wallop-slider__btn--previous" disabled="disabled">Previous</button>
  <button class="wallop-slider__btn wallop-slider__btn--next">Next</button>
</div>

<!-- Include Javascript -->
<script src="path-to-wallopSlider.js"></script>
<script>
  // Create new instance of WallopSlider
  var slider = new WallopSlider('.wallop-slider');
</script>
      

Standalone demo page

This is the most basic set up of WallopSlider, as you can see the demo page is not using any custom CSS and it is responsive by nature.

Options


<script>
  // Create new instance of WallopSlider
  var slider = new WallopSlider('.wallop-slider', {
    wSBtnPreviousClass: 'wallop-slider__btn--previous',
    wSBtnNextClass: 'wallop-slider__btn--next',
    wSItemClass: 'wallop-slider__item',
    wSCurrentItemClass: 'wallop-slider__item--current',
    wSShowPreviousClass: 'wallop-slider__item--show-previous',
    wSShowNextClass: 'wallop-slider__item--show-next',
    wSHidePreviousClass: 'wallop-slider__item--hide-previous',
    wSHideNextClass: 'wallop-slider__item--hide-next',
    wSCarousel: false
  });
</script>
      

WallopSlider uses BEM Class Methodology but if you don't like that then you can pass your own classes through the options object.

API

WallopSlider offers a basic API for you to use, so you can control it from your own buttons or gestures.

Sample usage


<script>
  // Create new instance of WallopSlider
  var slider = new WallopSlider('.wallop-slider');

  // Let's say you want to go to the 2nd slide when you click on your button:
  document.querySelector('.my-button').addEventListener('click', function () {
    slider.toGo(2);
  });

  // If you're using jQuery, you can do the same thing like this:
  $('.my-button').click(function () {
    slider.goTo(2);
  });
</script>
      

Make sure to check out this demo to see it in action!

Custom Events

WallopSlider dispatches a Custom Event everytime a slide changes, and it returns a custom detail object which contains the current slide index and the parent selector as a string.

!important note: The slide index starts from 0, like a proper index, you know? So... keep that in mind.

Sample usage


<script>
  // Create new instance of WallopSlider
  var slider = new WallopSlider('.wallop-slider');

  // Subscribe to change event
  slider.on('change', function (event) {
    console.log(event.detail.currentItemIndex); // Returns the index of the current slide
    console.log(event.detail.parentSelector); // Returns '.wallop-slider'
  });
</script>
      

Make sure to check out this demo to see it in action!

Demos

The basic wallop-slider.css has no animation, but to extend the animation to something of your own is really easy, so I've put together a few demos here that you can use:

I also created an "exercise" branch which you can download to help you create your own custom animations, see wallop-slider--custom.css. To download the exercise files click here

Geek info and that

Recently there has been a lot of talk about progressive enhancement, mobile first, responsive sites, performance optimisation and a whole lot of other stuff that we all do. Or at least like to think we do.

There are shit loads of sliders/carousels out there, seriously. More sliders than anything else. More sliders than fucking developers. So that's why I decided to also make one, why not? Surely one more won't hurt anyone.

!important note: before you start to hate me and think that I'm saying this is how sliders should be built, take a deep breath… this slider is simply a concept, and now I'm going to explain why I decided to build this…

Simple JavaScript

Unless you are making the most complex slider in the world, I see absolutely no need for your slider to be so JavaScript heavy. I wanted to make a slider which JavaScript is only used to:

Giving the power back to CSS

I wanted to have a slider which I could have different animations for different breakpoints, and I wanted to be able to do this with ease, and not have to hack around someone else's plugin... or write complex JavaScript and attach window resize listeners.

The animations are fully controlled with CSS. By default, wallop-slider.css contains no transitions at all (progressive enhacement?). The default styles are super simple and fluid (mobile first?), no hardcoded pixel values or none of that nonsense.

Custom animations

WallopSlider adds five different HTML classes for you:

Tip: if you want to animate the hiding classes (…--hide-previous & …--hide-next) you'll need to reset them to display: block;

With the classes above you should be able to do pretty much any animation you wish. Hopefully.

GitHub Addicts

The repo can be found here. Feel free to fork it or just look around.

Share the love

If you are like me, and want to try and get good practices out there, feel free to share this page.

If you want to ask something you can contact me on Twitter.