Complemento de carrusel adaptable para dispositivos móviles con JavaScript puro

Vista prévia

Descripción

Un complemento de carrusel adaptable, flexible y compatible con dispositivos móviles que admite la carga diferida de imágenes y la multiporción con atributos de datos HTML5.

Funcionamiento

Para instalar el complemento por secuencia, simplemente copie e importe los siguientes archivos al documento HTML.

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

Añadir elementos personalizados al carrusel y config cada elemento utilizando los atributos de datos HTML5 como se muestra a continuación:

• Data-Carousel-href: elemento Link
• datos-carrusel-src: versión móvil (pequeña) de su imagen
• Data-Carousel-MQ-768: versión de escritorio (grande) de su umage
• Data-Carousel-MQ-414: versión de la tableta (mediana) de la imagen

<div class="carousel-slider">


<div class="carousel-item" data-carousel-href="#">


<div class="carousel-item-text">



<h3>Item 1</h3>


</div>


<img src="loading.gif"




 data-carousel-src="mobile-1.png"




 data-carousel-mq-768="desktop-1.png"




 data-carousel-mq-414="1.png"




 alt="Image 1">

</div>


<div class="carousel-item" data-carousel-href="#">


<div class="carousel-item-text">



<h3>Item 2</h3>


</div>


<img src="loading.gif"




 data-carousel-src="mobile-2.png"




 data-carousel-mq-768="desktop-2.png"




 data-carousel-mq-414="2.png"




 alt="Image 2">

</div>


<div class="carousel-item" data-carousel-href="#">


<div class="carousel-item-text">



<h3>Item 3</h3>


</div>


<img src="loading.gif"




 data-carousel-src="mobile-3.png"




 data-carousel-mq-768="desktop-3.png"




 data-carousel-mq-414="3.png"




 alt="Image 3">

</div>


 ...

</div>

Los insertan en un contenedor DIV con la clase CSS de ' Carousel '. También puede pasar las siguientes opciones al carrusel utilizando los siguientes atributos de datos:

• Data-Carousel-Delay: retardo de transición
• -carrusel-Touch-Threshold: x distancia para deslizar antes de que comience la transición
• Data-Carousel-Indicators: indicadores personalizados

<div class="carousel"


 data-carousel-delay="5000"


 data-carousel-touch-threshold="220"


 data-carousel-indicators="">

<div class="carousel-slider">



<div class="carousel-item" data-carousel-href="#">



<div class="carousel-item-text">




<h3>Item 1</h3>



</div>



<img src="loading.gif"





 data-carousel-src="mobile-1.png"





 data-carousel-mq-768="desktop-1.png"





 data-carousel-mq-414="1.png"





 alt="Image 1">


</div>



<div class="carousel-item" data-carousel-href="#">



<div class="carousel-item-text">




<h3>Item 2</h3>



</div>



<img src="loading.gif"





 data-carousel-src="mobile-2.png"





 data-carousel-mq-768="desktop-2.png"





 data-carousel-mq-414="2.png"





 alt="Image 2">


</div>



<div class="carousel-item" data-carousel-href="#">



<div class="carousel-item-text">




<h3>Item 3</h3>



</div>



<img src="loading.gif"





 data-carousel-src="mobile-3.png"





 data-carousel-mq-768="desktop-3.png"





 data-carousel-mq-414="3.png"





 alt="Image 3">


</div>



 ...


</div>
</div>

Registro de cambios

09/17/2018

• Actualizado a la última versión