Mobile-friendly Auto Background Carousel Element | Suwa.js

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

background image slider, carousel background image css, automatic background image slider in html css, auto change background image css, fullscreen background image slideshow with css3

jQuery Slider/Carousel Plugin That Uses CSS3 Transitions | KOslider

How to make use of it:


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

1. Create an 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">

2. CSS Styles Required for Slides.

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

3. 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);

4. Configure the background circle using the default settings.

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

5. 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

Mobile-friendly Background Carousel, Suwa Plugin/Github

See Demo And Download

Official Website(nju33): Click Here

This superior jQuery/javascript plugin is developed by nju33. For extra advanced usage, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…