Responsive Image Carousel Plugin With No Dependencies – Bamboo.js

Preview:

Description:

Bamboo.js is a dependency-free JavaScript plugin to create responsive, cross-browser, fully configurable slider, carousels, and slideshows on the web.

Key features:

• Autoplay.
• Auto-resizes images to fit within the container.
• Custom controls.
• Horizontal or vertical directions.
• 5 transition effects.

How to use it:

Insert the minified version of the Bamboo.js plugin into the html document.

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

Add images to the slider container.

<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>

Initialize the Bamboo.js plugin and done.

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

Set the transition effect when switching between images:

• fade
• roll
• into
• blinds
• square

var sildeshow = bamboo(element, AnimationName);

Customize the slider by overriding the following settings.

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()