Carrusel de imágenes lisas en Vanilla JavaScript-vanillaslider. js

Vista prévia

Descripción

Un plugin ligero de vainilla de JavaScript que permite recorrer una lista de imágenes en forma de carrusel. Los efectos deslizantes suaves se basan en transiciones CSS3.

Funcionamiento

Cargue los siguientes archivos JavaScript y CSS en la Página Web.

<link rel="stylesheet" href="/path/to/vanillaslider.css">
<script src="/path/to/vanillaslider.js"></script>

Agregue una lista de imágenes al control deslizante de la siguiente forma:

<div class="vanilla-slider">

<ul class="vanilla-slider-container"



 data-height="300"



 data-width="400">


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


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


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


...

</ul>
</div>

Cree un nuevo VanillaSlider y pase el selector del contenedor deslizante como primer parámetro al objeto VanillaSlider.

var mySlider = document.querySelector('.vanilla-slider');
var vanillaSlider = new VanillaSlider(mySlider);

Inicialice VanillaSlider con las opciones predeterminadas.

vanillaSlider.init({

// options can be placed here
});

Opciones de configuración predeterminadas.

// autoplay
autoplay: false,

// autoplay interval
autoplayTime: 3000,

// shows navigation
control: true,

// shows pagination
pagination: false

Método de API.

// slides to a specific slide
mySlider.goTo(index);

// slides to next slide
mySlider.next();

// slides to previous slide
mySlider.prev();