Customized Sliding Carousel For Prototype
I 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
Dec 30, 2008 @ 11:59:27
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
Dec 30, 2008 @ 15:53:04
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
Jan 19, 2009 @ 08:51:20
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
Jan 19, 2009 @ 08:58:05
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.
Jan 20, 2009 @ 14:15:07
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
Mar 22, 2009 @ 09:47:23
hi , nice but if you just type dir=rtl in html the script stops working only works in FF on rtl any idea why???
Sep 18, 2009 @ 14:48:27
when I added numbers to slider, the content change but the effect isn’t work on explorer
Sep 19, 2009 @ 23:47:15
Hmmm what version if IE are you using? Do you have an example?
Sep 19, 2009 @ 23:49:52
shy^
I have no clue what that is. All I did was customized the looks of the slider.
Sep 19, 2009 @ 23:51:15
And thanks to you Bob for that.