Responsive Image Carousel Plugin With No Dependencies – Bamboo.js

Category: Javascript , Slider , Slideshow | November 24, 2018
Views Total:5,291 views
Official Page:Go to website
Last Update:November 24, 2018


Responsive Image Carousel Plugin With No Dependencies – Bamboo.js


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>

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
// pause the slider
// goto previous slide
// goto previous slide

You Might Be Interested In:

Leave a Reply