Mobile-friendly Background Carousel – Suwa.js

Preview:

Description:

Suwa.js is a responsive, touch-enabled and fully customizable carousel component that enables you to endlessly slide through a group of DIV elements containing different background images.

Installation:

# Yarn
yarn add suwa
# NPM
$ npm install suwa
# Bower
$ bower install suwa

How to use it:

Build the html structure for the background carousel.

<div id="app">
  <div class="page1" style="display:none">
    <h1><span>Page1</span></h1>
  </div>
  <div class="page2" style="display:none">
    <h1><span>Page2</span></h1>
  </div>
  <div class="page3" style="display:none">
    <h1><span>Page3</span></h1>
  </div>
  ...
</div>

The required CSS styles for the slides.

[class^=page] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}

Add your own background images to the slides:

.page1 {
  background-image: url(1.jpg);
}
.page2 {
  background-image: url(2.jpg);
}
.page3 {
  background-image: url(3.jpg);
}
...

Initialize the background carousel with default settings.

new Suwa({
    target: document.getElementById('app')
});

Available carousel settings:

new Suwa({
    target: document.getElementById('app'),
    data: {
      style: {
        // defaults
        height: '50vh',
        width: '100vw',
        baseColor: '#fff',
        subColor: '#222',
        accentColor: '#cb1b45'
      },
      // Whether to display progressbar on top (default: false)
      progress: true,
      
      // Whether or not to loop a page (default: false)
      pagerLoop: {
        // Whether it will go automatically to the next page when it is left // alone, how many milliseconds it will go to the next page
        autoScroll: 3000,
      },
      // To operate with the keyboard Set
      // default: false
      keyMaps: {
        prevPage: 37,
        nextPage: 39
      },
      // Whether to move the page with the side-wheel (horizontal swipe on smart-device)
      // (default: false)
      wheel: true
      // Whether to display pager
      // defaults
      pager: {
        inset: true // If false Pager display outside the page
      },
    }
});