FeatureSlider [script]
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);
}
});
March 11th, 2009 at 3:28 pm
Hi,
With the understanding that you first published the FeatureSlider script a full year ago, may I ask if you have done a version where the last image could continue to scroll right, for example, to reveal the starting image. The effect would be such that the carousel is full of images which simply cycle through again with little effort from the user. The carousel at my website link uses your existing script, yet I would like to click on forward or reverse arrows to go in one direction or the other. Would you have a recommendation about where I could turn to repurpose your very useful script?
March 11th, 2009 at 8:40 pm
Hey Todd,
Nice to see the script in action. I haven’t actually considered making the script into a carousel — mostly bacause my initial love for the idea was the rapid animation when moving from the very last element back to the first.
One of the nice things about the script is that it’s 98% CSS — and place the first image after the last would alter that model.
Having said that, you’d be able to achieve much of the desired effect my modifying the script with:
obj.previous = function(){if(obj.index>1) obj.go(obj.index-1) else obj.last();}
obj.next = function(){if(obj.index
April 15th, 2009 at 7:59 am
Hi Steffen,
Thank you for the response regarding the obj.next function. I interpreted object.next to be completed as “obj.next = function(){if(obj.index<1) obj.go(obj.index+1) else obj.first();}”
My nav links are now working, with the exception that adding to feature-slider.js does not enable a continuous previous or a continuous next,… that is, adding the new if-then-else statements seem to render the script inoperable, which doesn’t make any sense to me. I’m assuming that I might need some additional html, but it’s not clear to me what to try next. It’s quite alright if you do not have a moment to respond. It isn’t critical that I get 100 percent of the wrapping effect. You have helped me considerably, and I thank you so much.
April 15th, 2009 at 1:14 pm
Hmm, what happened there? Did I never actually complete the script…?
Well, previous() should jump to the last item of there’s no previous to show. And next() should jump to first if there are no next item to show:
obj.previous = function(){if(obj.index>1) {obj.go(obj.index-1);} else {obj.last();}}
obj.next = function(){if(obj.index>=obj.items.length-1) {obj.first();} else {obj.go(obj.index-1);}}
That might do the trick — otherwise, let me know exactly how the script is inoperable ;-)
April 16th, 2009 at 5:06 pm
I’m sorry for my bad choice of words. Your script has been very helpful and taught me learn a bit more about javascript. I do ok with something to build upon, but I’m not very good at writing the logic necessary to make a script like this work from scratch.
The “previous” link shows the behavior I expected, and it does look very nice! I changed the “next” function to:
obj.next = function(){if(obj.index>=obj.items.length) {obj.first();} else {obj.go(obj.index+1);}}
And it now behaves like the “previous” button does. I just couldn’t have gotten there without your help. Thanks!