Mobile-friendly Background Carousel – Suwa.js

Category: Javascript , Slider | March 24, 2017
Views Total:3,213 views
Official Page:Go to website
Last Update:March 24, 2017


Mobile-friendly Background Carousel – Suwa.js


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.


# Yarn
yarn add suwa
$ 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">
  <div class="page2" style="display:none">
  <div class="page3" style="display:none">

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

You Might Be Interested In:

Leave a Reply