FeatureSlider [script]
Saturday, March 22nd, 2008
If you’ve ever visited the front page of Beanstalk you’ll know that they have a very nice inline feature tour, which scrolls your across some html content on the front page.
In a project I’ve been working on we need a similar way to browse through a series of articles, so I’ve built a very simple Prototype (and optionally Scriptaculous, if you want the animation to work) script, which makes it trivial to include such tours: feature-slider.js
For the guys at Beanstalk, if you’re reading this: To get your tour to work correctly in Internet Explorer, simply add position:relative to the overall container. I like your temporary IE hack, but still…
Using the code
To use the code, simply do this:
<style>
#slide {width:300px; height:200px; overflow:hidden;}
</style>
<script src="feature-slider.js"></script>
<div id="slider">
<div>First item</div>
<div>(...)</div>
<div>(...)</div>
<div>Last item</div>
</div>
<script>var fs = new Slider('slider');</script>
A few real-life examples:
- The very simple slideshow
- More advanced content with manual menus
- Using callbacks to build the menu automatically
I’ve tried to keep everything simple, which means that the script doesn’t try to build navigation for you. Usually, this is where other similar carousel scripts go wrong. Instead you can use a few functions to browse the items in the FeatureSlider, or you can use callbacks to build advanced navigation:
fs.go(n): Go to a given item in the FeatureSlider
fs.next(n): Go to next item
fs.previous(n): Go to previous item
fs.first(n): Go to first item
fs.last(n): Go to last item
Initiating the code with the events arguments allows you to receive callbacks onLoad and onChange:
var fs = new FeatureSlider($('slider'), {
onLoad:function(obj){
alert('Loaded ' + obj.items.length + ' items');
},
onChange:function(obj, index){
alert('Showing ' + index + ' of ' + obj.items.length);
}
});
