Plugin de imagen deslizante compatible con dispositivos móviles-sliderjs

Vista prévia

Descripción

sliderjs es un pequeño plugin de control deslizante de imagen adaptable que le permite crear un carrusel compatible con dispositivos móviles en la página web multiplataforma. Admite la carga de imágenes asincrónicas para un mejor rendimiento.

Pase el cursor sobre el control deslizante verá controles que le permiten reproducir/pausar/ir a través del control deslizante.

Se contrae automáticamente las viñetas de paginación en una selección desplegable en dispositivos de pantalla pequeña como móvil y tableta.

Funcionamiento

Cargue el Font awesome para los controles deslizantes (opcional).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Cargue los archivos JavaScript y CSS necesarios.

<link rel="stylesheet" href="/slider.css">
<script src="/slider.js"></script>

Añada sus propias imágenes al deslizador utilizando el atributo ' Data-src-Async ' como se indica a continuación:

<div id="slider" class="example">

<div class="slide">


<img src="" alt="" data-src-async="1.jpg">

</div>

<div class="slide">


<img src="" alt="" data-src-async="2.jpg">

</div>

<div class="slide">


<img src="" alt="" data-src-async="3.jpg">

</div>

...
</div>

Establezca la altura/anchura máxima del control deslizante.

.example {

max-height: 400px;

 width: 90%;

 max-width: 960px;
}

Inicializa el control deslizante y usa Font awesome para los iconos.

var slider = new Slider("slider", {


play_icon: '<i class="fas fa-play"></i>',


pause_icon: '<i class="far fa-pause-circle"></i>',


prev_icon: '<i class="fas fa-angle-left"></i>',


next_icon: '<i class="fas fa-angle-right"></i>'
});

Controles deslizantes predeterminados:

var slider = new Slider("slider", {


pause: "<span>&#9654;</span>",


play: "<span>&#9208;</span>",


next: "<span>&gt</span>",


prev: "<span>&lt</span>"
});