Control deslizante de imagen a pantalla completa con vista previa en miniatura-previewSlider

Vista prévia

Descripción

previewSlider es un deslizador de imagen de pantalla completa adaptable donde los usuarios son capaces de previsualizar la imagen siguiente/anterior cuando se desplaza sobre las flechas de navegación.

Al hacer clic en las flechas de navegación, la transición a la siguiente/Prev imagen después de un cierto retardo, con una barra de progreso de cuenta atrás que indica a los usuarios cuánto tiempo tomará para iniciar la transición.

Funcionamiento

Cargue el JavaScript y la hoja de estilo de previewSlider en la página.

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

Añada imágenes (o imágenes de fondo) junto con los controles de navegación y las descripciones de slider a la página.

<div class="preview-slider">

<div class="slider-wrapper">


<div class="slider-item" style="background-image: url(img/img4.jpg)"></div>


<div class="slider-item" style="background-image: url(img/img1.jpg)"></div>


<div class="slider-item" style="background-image: url(img/img6.jpg)"></div>


<div class="slider-item" style="background-image: url(img/img3.jpg)"></div>


<div class="slider-item" style="background-image: url(img/img5.jpg)"></div>


<div class="slider-item" style="background-image: url(img/img2.jpg)"></div>

</div>


<div class="arrow arrow-right"></div>

<div class="arrow arrow-left"></div>


<div class="slider-desc">


<p class="title">WIKICSS.COM</p>



<span class="desc">JavaScript/HTML5/CSS3</span>

</div>
</div>

Inicialice el deslizador de previsualización con los siguientes parámetros:

• contenedor : elemento contenedor
• contenido: utiliza DIV o Image como diapositivas
• arrowLeft: flecha izquierda
• arrowRight: flecha derecha
• escala: tamaño de escala
• scrollSpeed: velocidad de animación

new previewSlider({


container: '.preview-slider',


content: true,


arrowLeft: '.arrow-left',


arrowRight: '.arrow-right',


scale: 0.4,


scrollSpeed: 4
});