Responsive multi media carrusel plugin-Kiwwwi Slider

Vista prévia

Descripción

Kiwwwi Slider es un pequeño, flexible, totalmente receptivo carrusel/Slider construido usando JavaScript puro y CSS que soporta cualquier tipo de medios tales como texto, imágenes, e incluso videos.

Funcionamiento

Añade el contenido de tu diapositiva al carrusel con un ID único. Tenga en cuenta que cada diapositiva dentro del carrusel debe ser un < artículo > etiqueta.

<div id="slider">

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

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

<article>



<div>





<h1>Slide 1</h1>





<p>The slide can have some text</p>



</div>

</article>

<article>



<div>





<h1>Slide 2</h1>





<p>Or a picture of a cute cat</p>



</div>

</article>

<article>



<div>





<h1>Slide 3</h1>





<p>Anything you want really</p>



</div>



<video autoplay loop src="vid/clouds.webm"></video>

</article>
</div>
</div>

Los estilos CSS de ejemplo para el deslizador de carrusel.

#slider article {

height: 30rem;

display: flex;

justify-content: center;

align-items: center;

font-family: sans-serif;
}

.slide-left, .slide-right {

top: 14rem;

padding: 0.5rem 1rem;

font-family: sans-serif;

font-size: 2rem;

cursor: pointer;

color: white;

background-color: rgba(0, 0, 0, 0.25);
}

.slide-left { left: 1rem; }

.slide-right { right: 1rem; }

#slider article h1 {

font-size: 2rem;

text-align: center;
}

#slider article p { text-align: center; }

#slider article:nth-of-type(1) {

color: white;

background-color: #333333;
}

#slider article:nth-of-type(2) {

color: white;

background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/cute-cat.jpg');
}

#slider article:nth-of-type(3) {

position: relative;

color: black;

overflow: hidden;
}

#slider article:nth-of-type(3) div { z-index: 2; }

#slider article:nth-of-type(3) video {

position: absolute;

top: 0;

left: 0;

width: 100%;
}

Coloque el archivo JavaScript de Kiwwwi Slider al final del documento.

<script src="js/kiwwwi-slider.min.js"></script>

Inicializa el deslizador de carrusel.

var mySlider = new KiwwwiSlider(document.querySelectorAll('#slider')[0], 3000, 1);

Parámetros posibles:

• sliderEl: Elemento que contiene las diapositivas
• Duración: Tiempo en milisegundos entre la conmutación automática de diapositivas, false si no se desliza automáticamente
• transición: Tiempo en segundos de la transición entre diapositivas

KiwwwiSlider(sliderEl, duration, transition);