Adaptable Image Carousel plugin sin dependencias-Bamboo. js

Vista prévia

Descripción

Bamboo. js es un plugin de JavaScript libre de dependencias para crear un control deslizante, carruseles y presentaciones de diapositivas en la web que sean adaptables, multinavegador y totalmente configurables.

Características

• Autoplay.
• Ajusta automáticamente el tamaño de las imágenes para que quepan dentro del contenedor.
• Controles personalizados.
• Direcciones horizontales o verticales.
• 5 efectos de transición.

Funcionamiento

Inserte la versión minimizada del complemento Bamboo. js en el documento HTML.

<link rel="stylesheet" href="css/bamboo.min.css">
<script src="js/bamboo.min.js"></script>

Agregue imágenes al contenedor deslizante.

<div class="demo">

<div class="slides">


<div><img src="img/1.jpg"></div>


<div><img src="img/2.jpg"></div>


<div><img src="img/3.jpg"></div>


<div><img src="img/4.jpg"></div>


<div><img src="img/5.jpg"></div>


...

</div>
 </div>

Inicialice el complemento Bamboo. js y listo.

var element = document.querySelector('.demo');
var sildeshow = bamboo(element);

Establezca el efecto de transición al cambiar entre imágenes:

• Se descolora
• Rodillo
• En
• Persianas
• Cuadrado

var sildeshow = bamboo(element, AnimationName);

Personalice el control deslizante reemplazando los siguientes valores.

var sildeshow = bamboo(element, AnimationName,{



// autoplay


autoPlay: true,



// auto resize image


autoFitImg: true,



// use JS animation


jsAnime: false



// reverse animation


reverse: true,



// horizontal or vertical


vertical: false,



// timeout in milliseconds


timeout: 2000,



// animation speed


speed: 2000,



// hide pagination bullets


hideDot: true,



// hide navigation arrows


hideArrow: true,



// CSS selectors of controls


prev: document.querySelector('.prev'),


next: document.querySelector('.next'),


dots: document.querySelector('.dots')
});

API methods.

// play the slider
sildeshow.run()

// pause the slider
sildeshow.stop()

// goto previous slide
sildeshow.toPrev()

// goto previous slide
sildeshow.toNext()