Carousel

stablev1.0.0

Shows a collection of sliding images inside a container.

Overview

The carousel component transforms a list of image elements into an interactive block of sliding images.
This way, we can fit a high volume of image content into little space.

👁 UX : If needed, you can make the sliders more catchy to the eye enabling the auto option. 

Basic Slider :


Automatic sliding :


Absolutely positioned controls :

Usage

Dependencies

To get the carousel component working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
  3. Javascript
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import "/node_modules/design-system/src/sass/03-organisms/carousel";

import Slider from 'design-system/src/js/03-organisms/carousel/slider';

Basic code

The carousel slider is composed of a list of image elements, it needs to be initialized via a Javascript class instantiation.

  1. Html
  2. Pug
  3. Javascript
<ul id="sliderBasic">
  <li><img src="http://via.placeholder.com/1200x400"></li>
  <li><img src="http://via.placeholder.com/1200x400"></li>
  <li><img src="http://via.placeholder.com/1200x400"></li>
</ul>

ul#sliderBasic
  li
    img(src="http://via.placeholder.com/1200x400")
  li
    img(src="http://via.placeholder.com/1200x400")
  li
    img(src="http://via.placeholder.com/1200x400")

new Slider({
  selector: '#sliderBasic',
});

Class instantiation

Takes a single parameter in the form of an object of options. 

new Slider( options );
Options object
Key Value type Default Required Description
items number 1 No Makes a several images visible at the same time. The default value is one image.
selector string / Yes The selector of the carousel base list element.
alignment string 'top' No When several images are showed at the same time, this value determines how they align if they are of different sizes.
The value can be one of 'top', 'bottom' and 'center'.
slideBy number, string 1 No The number of images to advance in each move.
Alternatively, you can pass 'page' to specify a number equal to the items option value.
auto false boolean No Make images slide automatically.
autoTimeout number 2000 No The number of milliseconds to wait before moving to the next slide in auto mode.
autoDirection string 'forward' No The direction to which the images slide in automatic mode. Either 'forward' or 'backward'.
controls boolean true No Disable or enable the control arrows.
controlsAbsolute boolean false No Position both control arrows inside the slider container.
nav boolean false No Disable or enable the control dots.
navAbsolute boolean false No Position the navigation dots inside the slider container.
disable boolean false No Disables the component.
responsive object {} No An object consisting of several configuration objects, one for each breakpoint we want to define.
The key define the starting point for the breakpoint in pixel units. The value is the configuration object.
Responsive options example : 
new Slider({

  // General slider options
  selector: '#sliderBasic',
  items: 1,
  auto: true,

  // By breakpoint slider options
  responsive: {
    // Disable automatic slides when viewport width is between 0 and 799 px
    0: {
      auto: false,
    },
    // Show two images per slide when viewport width is 800 px or bigger
    800: {
      items: 2,
    },
  },

});

Lazy load

Our slider is prepared to play nice with image lazy loading ! Check this out...

🤖 Friendly reminder : You need to import the extra dependencies for the lazy loading utility to use this functionality with the sliders.

🤖 Robotic PD : Laziness is sometimes good for image loading, but not for humans. Do not be lazy, human. 

Lazy Slider :
  1. Html
  2. Pug
  3. Javascript
<ul id="sliderLazy">
  <li><img data-slidersrc="http://via.placeholder.com/1200x400" /></li>
  <li><img data-slidersrc="http://via.placeholder.com/1200x400" /></li>
  <li><img data-slidersrc="http://via.placeholder.com/1200x400" /></li>
</ul>


ul#sliderLazy
  li
    img(data-slidersrc="http://via.placeholder.com/1200x400")
  li
    img(data-slidersrc="http://via.placeholder.com/1200x400")
  li
    img(data-slidersrc="http://via.placeholder.com/1200x400")

// Initialize slider, save object reference
const lazySlider = new Slider({
  selector: '#sliderLazy',
})

// Get a nodeList of the slider's lazy images
const sliderLazyImages = document.querySelectorAll( '[data-slidersrc]' );

// Initialize lazy loading for these images
if ( sliderLazyImages.length > 0 ) {
  const globalLazyLoader = new LazyLoad({
    // Use slider images total width as threshold
    threshold: lazySlider.getSlidesTotalWidth(),
    data_src: 'slidersrc',
    class_loading: 'js-lazy--loading',
    class_loaded: 'js-lazy--loaded',
    class_error: 'js-lazy--error',
    callback_set: el => {
      el.classList.toggle( 'js-lazy--img-loading' );
    },
    callback_load: el => {
      el.classList.toggle( 'js-lazy--img-loading' );
    }
  });
}