Extensible mootools carousel with dynamic elements addition/removal.
It is quite simple to use. a new class Carousel.Extra has been added. it allows you to make your carousel slide automatically. it has every Carousel options/properties plus some specific options which allow you to control the auto slide
/* the container */ #slide { width: 810px; margin: 10px auto; position: relative; height: 300px; width: 810px; overflow: hidden; } /* carousel tabs */ div.tabs a.selected { text-decoration: underline; } /* carousel items */ #slide div { position: relative; display: inline-block; width: 400px; margin-left: 5px; } /* content */ #slide span { position: absolute; bottom: 0; left: 0; padding: 10px; width: 380px; color: #fff; background: url(../Assets/images/grey.png); background: rgba(0, 0, 0, .7) }
<div id="slide"> <div><a href="http://github.com/tbela99/tab"><img src="../Assets/slides/slide1.jpg" width="400" height="300" /></a><span>Caption 1: put anything you want in the caption. Note that there is a link in the image</span></div> <div><a href="http://github.com/tbela99/tab"><img src="../Assets/slides/slide2.jpg" width="400" height="300" /></a><span>Caption 2: put anything you want in the caption. Note that there is a link in the image</span></div> <div><a href="http://github.com/tbela99/tab"><img src="../Assets/slides/slide3.jpg" width="400" height="300" /></a><span>Caption 3: put anything you want in the caption. Note that there is a link in the image</span></div> <div><a href="http://github.com/tbela99/tab"><img src="../Assets/slides/slide4.jpg" width="400" height="300" /></a><span>Caption 4: put anything you want in the caption. Note that there is a link in the image</span></div> <div><a href="http://github.com/tbela99/tab"><img src="../Assets/slides/slide5.jpg" width="400" height="300" /></a><span>Caption 5: put anything you want in the caption. Note that there is a link in the image</span></div> </div> //the controls <div class="tabs"><a href="#page-p">«</a><a href="#0">1</a><a href="#1">2</a><a href="#2">3</a><a href="#3">4</a><a href="#4">5</a><a href="#page-p">»</a></div>
window.addEvent('domready', function () { var duration = 300, links = $$('div.tabs a'), tab = new Carousel.Extra({ container: 'slide', scroll: 2, circular: true, current: 3, previous: links.shift(), next: links.pop(), tabs: links, /* mode: 'horizontal', autostart: false, */ activeClass: 'selected', fx: { duration: duration } }) })
these options are specific to Carousel.Extra
Fired after the first item change.
onChange(current)
add an element to the carousel.
remove element at given index from the carousel.
display the next set of items.
display the previous set of items.
make an item visible.
return true if the item at index is visible.
starts the automatic slide.
stop the automatic slide.
toggle the automatic slide.
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus