Carrusel de imágenes adaptables en Pure JS-Easy-Carousel

Vista prévia

Descripción

Easy-Carousel es un plugin de JavaScript puro para generar un carrusel adaptable y altamente configurable a partir de un grupo de imágenes.

El carrusel se repite infinitamente sobre las imágenes al hacer clic en las flechas siguiente o anterior. También se admite la reproducción automática.

Todas las opciones se pueden pasar a través de datos atributos. Esto significa que es posible implementar varios carruseles en una página.

Funcionamiento

Descargue e inserte el script de la secuencia fácil justo antes de la etiqueta de cierre del cuerpo.

<script src="easy-carousel-es5.min.js"></script>

Inserte imágenes en un elemento contenedor y config el carrusel con los siguientes atributos HTML Data :

• datos-EZ-vista-número: El número de elementos por vista, por defecto: 5
• Data-EZ-AutoScroll: Activar reproducción automática, por defecto: ' OFF '
• Data-EZ-width: El ancho del carrusel, por defecto: ' 100% '
• Data-EZ-height: La altura del carrusel, por defecto: ' 200px '
• Data-EZ-BG: El color de fondo del carrusel, por defecto: ' blanco '
• Data-EZ-Arrow-color: El color de las flechas de navegación, por defecto: ' negro '
• datos-EZ-Arrow-tamaño: El tamaño de la flecha, por defecto: ' 2rem '
• datos-EZ-Linked: Está vinculado, predeterminado: ' false '
• Data-EZ-Arrow-tipo: El tipo de flecha, por defecto: ' 1 '
• datos-EZ-Scroll: velocidad de animación, por defecto: ' 5000 '

<div id="carousel"



data-ez-view-number=5



data-ez-autoscroll="on"



data-ez-width="100%"



data-ez-height="300px"



data-ez-bg="#f55353"



data-ez-arrow-color="white"



data-ez-arrow-size="3rem"



data-ez-linked="false"



data-ez-arrow-type="2"



data-ez-scroll-time=2000>


<img src="1.png" data-ez-href="#">


<img src="2.png" data-ez-href="#">


<img src="3.png" data-ez-href="#">


<img src="4.png" data-ez-href="#">


<img src="5.png" data-ez-href="#">


...
</div>

Inicializa el plugin de carrusel.

const carousel = new Carousel("#carousel");

Activa el carrusel. Eso es todo.

carousel.makeCarousel();