Carrusel de fondo para móviles-Suwa. js

Vista prévia

Descripción

Suwa. js es un componente de carrusel adaptable, táctil y totalmente personalizable que le permite deslizarse sin cesar a través de un grupo de elementos DIV que contienen diferentes imágenes de fondo.

Instalación

# Yarn
yarn add suwa

# NPM
$ npm install suwa

# Bower
$ bower install suwa

Funcionamiento

Construye la estructura HTML para el carrusel de fondo.

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

Los estilos CSS requeridos para las diapositivas.

[class^=page] {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-size: cover;
}

Añade tus propias imágenes de fondo a las diapositivas:

.page1 {

background-image: url(1.jpg);
}

.page2 {

background-image: url(2.jpg);
}

.page3 {

background-image: url(3.jpg);
}

...

Inicializa el carrusel de fondo con la configuración predeterminada.

new Suwa({


target: document.getElementById('app')
});

Configuración de carrusel disponible:

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



},


}
});