Complemento de carrusel adaptable en Vanilla JavaScript-papaCarousel

Vista prévia

Descripción

papaCarousel es un plugin de JavaScript vainilla libre de dependencia para crear un carrusel totalmente adaptable y altamente personalizable para cualquier contenido Web.

Más características

• Una barra de progreso para indicar la cantidad de tiempo que dejaron las transiciones de carrusel a la siguiente diapositiva.
• Botones de navegación.
• Retardo de transición personalizado y velocidad de animación.
• Animaciones de desplazamiento de desvanecimiento y horizontal/vertical.

Funcionamiento

Agregue referencias a los archivos JavaScript y CSS del papaCarousel.

<link rel="stylesheet" href="papaCarousel.css">
<script src="papacarousel.min.umd.js"></script>

O instalar & importar el papaCarousel como un módulo.

# Yarn
$ yarn add papacarousel

# NPM
$ npm install papacarousel --save

import { PapaFascade } from 'papacarousel';

Añade diapositivas al carrusel siguiendo la estructura HTML como estas:

<div class="papa-container">

<div class="papa-item">1</div>

<div class="papa-item">2</div>

<div class="papa-item">3</div>

<div class="papa-item">4</div>

<div class="papa-item">5</div>

...
</div>

Inicialice el papaCarousel para crear un carrusel predeterminado.

new PapaFascade().getPapa();

Personalice el carrusel reemplazando las siguientes opciones en los métodos encadenados.

new Papacarousel.PapaFascade()



// parent container


.setParent('.papa-container')



// carousel item


.setElements('.papa-item')



// shows navigation buttons


.setButtons(true)



// shows progress bar


.setProgressBar(true)



// transition delay


.setTimePerSlide(5000)



// animation speed


.setTimingFn(300)



// transition effect


.setTransitionFn('linear')



// or 'fading', 'slidingY'


.setType('slidingX')



// initialize the carousel


.getPapa();