Responsive Image Carousel Plugin With No Dependencies – Bamboo.js

Category: Javascript , Slider , Slideshow | November 24, 2018
Author: Aaron-Bird
Views Total: 1,134
Official Page: Go to website
Last Update: November 24, 2018
License: MIT

Preview:

Responsive Image Carousel Plugin With No Dependencies – Bamboo.js

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

You Might Be Interested In:


Leave a Reply