Customized Sliding Carousel For Prototype
Nov.28.08I have looked all over the web for a Prototype content slider that I can use on some of the sites that I am building. Finally I stumbled on this one. Its called Glider-0.0.3. Out of the box it isn’t very pretty, so I went ahead and added my own styles to it. Maybe some one out there might find it useful.
Script Built By:missingmethod.com
Slider options
Auto Scroll:
var my_glider = new Glider(‘my-glider’, {autoGlide: true, frequency: 6});
Scroll with only the buttons:
var my_glider = new Glider(‘my-glider’, {duration:0.5});
Buttons Below
Screen Shots
Buttons left and right
Screen Shot
Filed under: Featured | Comments 11
Nice, I’ve been looking for something like this for awhile myself. Nice work!
Great post. How would I take your code and use this article slider and make it so whenever I publish the category lets say ‘feature’ it automatically puts it in this slider. I’m teaching myself programming, but not sure how to do this. Any help or direction to learning this would be greatly appreciated.
Realistically all I wanted to do is add numbers to the bottom of my current slider at http://www.organicjar.com but I’m not sure where to start or what online sites I can use to get help. THANKS for your time! – Jason
HI Jason, you can add numbers to your slider. I believe by adding the following under or above the slider.
<div class="controls">
<a href="#section1" rel="nofollow">1</a>
<a href="#section2" rel="nofollow">2</a>
<a href="#section3" rel="nofollow">3</a>
<a href="#section4" rel="nofollow">4</a>
</div>
Here is their what looks to be a non working example, lol.
http://www.missingmethod.com/projects/glider.html
Hi Jake, Regarding the previous post about adding numbers; is there any way to highlight the numbers as the glider moves through each section?
Thanks, Bob
Hi Bob, yes that is possible. I believe the css you need to add is:
.active {
background-color: #000;
color: #fff;
}
Just change to get the highlight color you want. That’s what was in the demo file that MissingMethod provided.
Hi Jake,
Thanks for the response, I added the class but without success. I did find the following in the js file:
this.controls.each(function(control){
if (control == element) {
control.addClassName(“active”)
}
else {
control.removeClassName(“active”)
}
});
Bob
hi , nice but if you just type dir=rtl in html the script stops working only works in FF on rtl any idea why???
when I added numbers to slider, the content change but the effect isn’t work on explorer
Hmmm what version if IE are you using? Do you have an example?
shy^
I have no clue what that is. All I did was customized the looks of the slider.
And thanks to you Bob for that.