Wallop – A simple mobile-first slider with CSS3 transitions

Today, I am sharing a lovely mobile-first slider with some amazing CSS3 Transitions. It is created by Pedro Duarte who wanted to create not just another slider but one that is a little bit different. What is different about this slider is that all the transitions and animations are all in the CSS, it uses minimal JavaScript, it is very flexible,  scalable and very lightweight. It also dependency free and you won’t need any jQuery.

Wallop - A simple mobile-first slider with CSS3 transitions

DEMO | DOWNLOAD

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

!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:

 


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *