Deslizador de fondo adaptable básico en JavaScript puro-SimpleSlider

Vista prévia

Descripción

SimpleSlider es un plugin de slider/carrusel de respuesta genérica con JavaScript que tiene la capacidad de deslizarse a través de cualquier contenido HTML a una cierta velocidad.

Funcionamiento

Incluya la hoja de estilos ' simpleSlider. min. css ' en la sección Head y el archivo JavaScript simpleSlider. min. js justo antes de la etiqueta body de cierre.

<link rel="stylesheet" href="dist/simpleSlider.min.css">
<script src="dist/simpleSlider.min.js"></script>

La estructura HTML del control deslizante.

<div class="simple-slider simple-slider-demo">

<div class="slider-wrapper">


<div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">



First slide


</div>



<div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">



Second slide


</div>



<div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">



Third slide


</div>

</div>


<div class="slider-btn slider-btn-prev"></div>


<div class="slider-btn slider-btn-next"></div>
</div>

Inicialice el control deslizante y listo.

var slider = new simpleSlider('.simple-slider-demo');

Personalice la duración de la transición en milisegundos.

var slider = new simpleSlider('.simple-slider-demo',{


speed: 2000
});

Establezca el retardo entre transiciones en milisegundos.

var slider = new simpleSlider('.simple-slider-demo',{


delay: 6000
});

Activar/desactivar la funcionalidad de reproducción automática.

var slider = new simpleSlider('.simple-slider-demo',{


autoplay: true
});

Clases CSS predeterminadas.

var slider = new simpleSlider('.simple-slider-demo',{


classes: {



wrapper: 'slider-wrapper',

// wrapper class [string]



slide: 'slider-slide',

// slide class [string]



buttons: 'slider-btn'
 // buttons class [string]


}
});

Registro de cambios

v1.7.2 (09/08/2018)

• Various fixes