Responsive Image Carousel/Slider Plugin in Pure Javascript – Bamboo.js
Bamboo.js Carousel widget Written in JavaScript without third-party libraries. Supports multiple animation effects, infinite scrolling, self-adaptation
Features:
- Compatible with ie9 and above browsers
- Multiple animations
- Response
- Customizable
- Auto play
Libraries
Loading scripts and css styles
<link rel="stylesheet" type="text/css" href="css/bamboo.css"> <script type="text/javascript" src="js/bamboo.js"></script> |
HTML
Use the “div” element as the container, add “ul” of “class=slides” and place the image in the “li” element
<div class="demo"> <ul class="slides"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> <li><img src="img/4.jpg"></li> </ul> </div> |
JS
Call bamboo with “div” as a parameter
var element = document.querySelector('.demo'); var fade = bamboo(element, 'fade'); |
You can use following options to customize the plugin.
var element = document.querySelector('.demo'); var sildeshow = bamboo(element, 'fade', { autoPlay: true, autoFitImg: true, reverse: true, timeout: 4000, speed: 2000, hideDot: true, hideArrow: true, prev: document.querySelector('.prev'), next: document.querySelector('.next'), dots: document.querySelector('.dot-container') }); |
Where:
- autoPlay — (Type: Boolean, Defaults: true) Autoplay
- autoFitImg — (Type: Boolean, Defaults: true) Adjust the picture to fit the container size
- reverse — (Type: Boolean, Defaults: false) Reverse.When “autoPlay:true” is valid
- timeout — (Type: Number, Unit: millisecond, Defaults: 2000) Pause time interval
- speed — (Type: Number, Unit: millisecond) Animation speed
- hideDot — (Type: Boolean, Defaults: false) Hide navigation dots
- hideArrow — (Type: Boolean, Defaults: false) Hide the next/previous page switch button
- prev — (Type: Element) previous page element
- next — (Type: Element) next page element
- dots — (Type: Element) container element of navigation dots
Function
var element = document.querySelector('.demo'); var sildeshow = bamboo(element, 'fade'); sildeshow.stop() //stop() Pause playback sildeshow.toPrev() //toPrev() Go to previous page sildeshow.toNext() //toNext() Go to next page sildeshow.run() //run() Start playing |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by Aaron-Bird. Visit their official github repository for more information and follow for future updates.