Box Slider
horizontal_box_slider.js is very tiny (≈2.75KB) framework agnostic “carousel” control.
jquery.horizontal_box_slider.js (≈2KB minified) built on top of that. It scrolls smoothly.
API
var turner_painting = document.getElementById("turner_painting");
var pictures = turner_painting.getElementsByTagName("img");
var slider = new HorizontalBoxSlider(turner_painting, pictures)
slider.next()
slider.previous()
slider.left(20)
slider.left(395)
slider.scrollTo(pictures[0])
slider.scrollTo(pictures[1])
slider.scrollTo(pictures[2])
slider.currentIndex() // →
slider.scrollToStart()
slider.scrollToEnd()
Why?
horizontal_box_slider.js is using native scrolling. There are a lot of “carousels”, but none of them is using it.
Tests
Works well in Chrome 6, Firefox 3.5, Safari 5, Opera 10.60, and IE 8. IE 6 and 7 have some issues with examples, but the script itself works.
