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

Live Demo

DownLoad

Screen Shots

Buttons left and right

Live Demo

Download

Screen Shot

10 Replies to “Customized Sliding Carousel For Prototype”

  1. 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

  2. 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

  3. 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

  4. 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.

  5. 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

  6. hi , nice but if you just type dir=rtl in html the script stops working only works in FF on rtl any idea why???

Comments are closed.