Carrusel de imágenes básicas con JavaScript puro-SIEMA. js

Vista prévia

Descripción

SIEMA. js es un plugin de JavaScript mínimo vainilla utilizado para generar un básico pero personalizable y arrastrable Slider/Carousel sin ninguna dependencia 3rd.

Funcionamiento

En primer lugar, debe cargar el SIEMA. js en la Página Web.

<script src="dist/siema.min.js"></script>

Agregue un grupo de elementos HTML al control deslizante.

<div class="siema mySiema">

<div><img src="1.jpg"></div>

<div><img src="2.jpg"></div>

<div><img src="3.jpg"></div>
</div>

Cree una nueva instancia de SIEMA y pase las opciones como el primer parámetro al objeto SIEMA como este:

var mySiema = new Siema({


selector: '.mySiema'
});

Agregue los controles NEXT/PREV al control deslizante.

<button class="btn js-prev">prev</button>
<button class="btn js-next">next</button>

document.querySelector('.js-prev').addEventListener('click', function() {mySiema.prev()});
document.querySelector('.js-next').addEventListener('click', function() {mySiema.next()});

Todas las opciones predeterminadas para personalizar el control deslizante.

// slider selector
selector: '.siema',

// animation duration
duration: 200,

// easuing function
easing: 'ease-out',

// how many slides per page
perPage: 1,

// start index
startIndex: 0,

// enable draggable
draggable: true,

// dragging threshold in pixels.
threshold: 20,

// infinite loop
loop: false,

Registro de cambios

v1.5.1 (05/31/2018)

• Correcciones