Responsive Image Carousel/Slider Plugin in Pure Javascript – Bamboo.js

by Posted on

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

javascript-slider-plugin

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.


Published by admin