Slider.js - a javascript slider component
Inspired by the cool sliding window thingy at Panic, I decided to whip something up that I could use on Curbly.
Slider.js depends on Prototype and effects.js (from the Scriptaculous library), and it’s available for download here.
Here’s what it looks like:
Comments (47 comments)
Looks sweet, thanks!
Hugh Bien / May 14th, 2007, 8:08 pm / #
This is great - thanks for making it available.
Can you tell me if the content within the code would be indexed by search engines. I’d really like to use it but it will make or break the deal.
Vince Dean / May 16th, 2007, 10:39 am / #
Vince: yes, the content should be indexed just like any other content on the page. Since it’s just in a div, rather than an iframe, the spider should see it.
bruno / May 18th, 2007, 6:30 pm / #
Nice work!
Jay / May 20th, 2007, 10:08 pm / #
hi bruno, thanks for your feedback. I went to download and it appears that link is no longer valid. Can you fix it?
Vince Dean / May 21st, 2007, 11:08 am / #
Sorry about that, Vince. I accidentally broke the link when I changed the name from Slider.js to Glider.js. Fixed now!
bruno / May 21st, 2007, 10:41 pm / #
Hi Bruno, this is amazing! Thanks so much for sharing your talents with all of us. I’m stunned by how nifty this is.
Josh Farkas / May 25th, 2007, 8:35 pm / #
Bruno,
Thank you much for your work. This is beautiful.
I’m having a problem though with content longer than the height of my div. I don’t get a vertical scroll bar. Is there a way to fix / accomplish this?
Kevin P / June 2nd, 2007, 10:35 pm / #
Congratulation for this amazing script !
Due to the initialisation of div.scroller and div.content in the script glider.js
perhaps a class contener “my-glide1&2″ and the css associated in the example, could help newbies like me to use serveral gliders in a same page …
javascript is very new for me, but I hope to be able soon to made an implementation.
On other point, do you think is possible to have a slide up/down effect with a similar script ?
Your French Fan
Laurent J.V. Dubois / June 3rd, 2007, 11:56 pm / #
I have been playing around with this lovely script (being a javascript novice but a fair copying and paster) and got everything to work fine on a page - except it scrolls vertically instead of horizontally?? Any ideas why this may happen?
Liam / June 5th, 2007, 9:10 am / #
http://www.ljvd.com/glider-0.0.3/
test-gluper-1.html is a test of a vertical glider
some help is need about the indexation …
test7.html is a demo with 2 gliders
Laurent J.V. Dubois / June 6th, 2007, 9:29 am / #
Regarding my earlier unwanted vertical scrolling issue - I fixed it by seeing I’d not put in the encapsulating ‘content’ class div. Bizarrely, leaving this out appears to leav everything running correctly apart form, as said, vertically.
Liam / June 6th, 2007, 9:46 am / #
Happy to read you have find an issue Liam
About the Safari Bug
I thought that it was my code, but the page of Bruno’s origin presents the same defect…
If somebody has a solution…
I tested the last version of effects.js and made researchs and tests, without results…
Here is a screen shot :
http://www.ljvd.com/glider-0.0.3/safari-bug-image.html
Laurent J.V. Dubois / June 6th, 2007, 12:15 pm / #
Hmm…could you make it so one link activated two sliders?
Leland / June 6th, 2007, 5:05 pm / #
Hey Bruno,
Thanks for the work and making this available!
Has anybody come up with a solution on placing a link inside the div tags to slide to the next div tag where postbacks also happen?
Eric / June 14th, 2007, 1:55 pm / #
Hi Bruno, great script.
I have one question though: is it possible to highlight the active link, i.e. by adding a to it?
That way, I could use it in a tabbed interface, as the guys from Panic do.
Thanks for your work and reply.
Bas / June 18th, 2007, 6:27 am / #
Edit previous post:
The first line should read: “I have one question though: is it possible to highlight the active link, i.e. by adding a class=”active” to it?
Bas / June 18th, 2007, 6:31 am / #
Hey bruno,
i’ve got a question..i’ve implemented the script in an portfolio site of an friend of mine. www.juriaanbooij.com. And must say it works realy nice..
only within safari there is an bug. See the screenshot:
http://www.flickr.com/photos/thaisie/577747018/
the pictures are nog sliding totaly in the screen they stop..
Do you know an solution to fix thjs?
thanx in advantage..
thaisie / June 20th, 2007, 6:26 pm / #
I’m also bumping into the same Safari bug as ‘Laurent J.V. Dubois’ (below).
I wonder if there is a fix..
http://www.ljvd.com/glider-0.0.3/safari-bug-image.html
chris / June 23rd, 2007, 10:25 pm / #
hi, great script. i use a modified version (Don’t Loop!) for the german mimimum-wages campaign site http://www.mindestlohn.de/ausstellung/
I guess that safari bug you’ve been discussing can not be solved, as it seems to that this is a matter of safari dealing with the flash plugin and repositioning in divs and so on … i tried to use the thickbox js for overlays over a quicktime once - a mess!
Alex / June 27th, 2007, 5:18 am / #
I have two scrollers on a page, and want to move the second with an element in the first. I’ve tried attaching an MoveTo event but without much luck..
The container is #links.scroller and the elements are like so
section1, section2, section3…. etc.
Could you give me the syntax for this please?
Thanks!!
Jon / June 27th, 2007, 11:43 am / #
Very nice script.
I am going to be using this for an e-commerce site so that users can glide through products like hanged clothes in a closet.
Like Bas asked above, is there is a way to have the top links (Section 1, Section 2, Section 3, etc.) have a “current” state like the Coda site? This would be tremendously helpful!
Jonathan / July 5th, 2007, 1:32 am / #
Is there any sort of documentation related with the effects and their configuration? I want to change the SmoothEffect by a Shrink one for example, but I cannot find the way to do that…
Kupy / July 11th, 2007, 9:48 am / #
Great script! I have been “playing” with it for a few days and have skinned it to look and feel like an iTunes interface…but alas, the flash issue is freaking me out. The main section I want to be in flash, but when I click onto any other section I see the same problem (all browsers, all platforms) as listed above. I have tried everything under the sun but it still “glides” over/above and does not hide like the other sections. Any thoughts or fixes???
Pat / July 11th, 2007, 2:51 pm / #
Bruno!, congratulations :D
Javier Rioja / July 12th, 2007, 12:29 pm / #
You should note that if you want a vertical scroll instead of the horizontal just comment out float:left in this css- div.scroller div.section{}
Matt Donohue / August 6th, 2007, 8:09 am / #
This is absolutely GREAT! I’ve been playing around with it and added it to one of my clients websites (she’s a model and I used it for her portfolio of 36 pictures).
http://tammyfelice.com/portfolio.html
I’m having a few issues though - in IE on the 2nd and 20th pictures, theres a white area that shows up to the left of the pictures.
Also - in any browser, as soon as I get to the 17th picture using the arrows, it goes back to the beginning. I’ve tried to modify everything, but I’m not exactly sure where I should specifically be doing that.
Any ideas?
Thanks,
jen@coderoop.com
jen / August 6th, 2007, 2:18 pm / #
Hi, just lovin’ this puppy! Nice one Bruno!
I’m so far away from understanding what’s going on here, it’s frightening, but I’ve managed to get 2 working on the page. However, because (I think) you can only reference one css and one of each of the .js files per page you are restricted to the sliders being the same size and transition type, etc.
I’d like the option of having different sizes and different scroll directions possible on the same page. Has anyone found a way yet?
By the way, Matt’s point about commenting out the float rule to make it vertical works a treat. Thanks Matt.
Cheers guys.
Gordon / August 21st, 2007, 8:04 am / #
Great effect! How do you have multiple sliders on the same page? I can’t find documentation anywhere (but I might not be looking in the right places).
Thanks!
Steve / August 29th, 2007, 2:46 pm / #
awesome, this is just what i needed. would it be possible to integrate an autoplay function?
Sven / August 30th, 2007, 3:25 pm / #
nevermind, just found the frequency and autoGlide parameters! d’oh! if we had the possibility to stop the autoGlide as soon as an user has interacted with the navigational controls, that would be the icing on the cake :)
Sven / August 30th, 2007, 3:39 pm / #
Thanks for this, just brilliant. Threw it in to something I’ve been working on. Styles up nicely.
Wade / August 30th, 2007, 5:44 pm / #
Nice script, Bruno! I just extended it so that the pages are loaded dynamically only when they are called, in this way even with a lot of contents the load time is reduced.
Simo / September 6th, 2007, 5:49 am / #
Hey I just wanted to say this is a great little script that has come in use. However, I find that this script clashes with other common utilities like slimbox. I can’t seem to get them to work together. I think its a simple call that is using the same variable, but honestly I am not that skilled in scripting. Here is where the issue occurs:
Gallery Page In my content manager when I set images to be zoomed, they are initiated by the common SlimBox feature. If you try opening the ‘Artist Series’ the left and right arrows no longer initiate the script that scrolls them. Is there a way to fix this?
Anthony / September 9th, 2007, 12:45 am / #
Nice job.
I recently created a Coda-style slider using jQuery. If anyone is interested, it’s at ndoherty.com/demos/coda-slider
Niall Doherty / September 16th, 2007, 6:47 pm / #
Nice script!
One question: How can I glide to a section in the container, using JavaScript? Something like my-glider.moveTo(x,y)?
Chris / September 24th, 2007, 9:22 am / #
To add an active clas, an make the slide onMouseOver
– the html
Section 1
Section 2
Section 3
Section 4
Section 1
Section 2
Section 3
Section 4
var my_glider = new Glider(’my-glider’, {duration:0.5, initialSection: ’section1′});
– the css
div.scroller {
/* modify width and height of scrolling section if necessary */
width: 635px;
height: 300px;
overflow: hidden;
border:1px solid #cccccc;
}
div.scroller div.section {
/* modify width and height of each section as needed (should match the size of the scroller window) */
width:635px;
height:300px;
overflow:hidden;
float:left; /* COMMENT THIS TO MAKE A VERTICAL GRILDER*/
padding:1em;
}
.active {
background-color: #000;
color: #fff;
}
– include this on the javscript
// change this
this.events = {
click: this.click.bind(this)
};
// for this
this.events = {
mouseenter: this.click.bind(this)
};
//-----------
//this
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
// for this
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('ul.controls li a');
controls.invoke('observe', 'mouseover', this.events.mouseenter);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.name, this.scroller, { duration:this.options.duration });
Event.stop(event);
var botones = this.wrapper.getElementsBySelector('ul.controls li a');
for (var s = 0; s
Alvaro / September 28th, 2007, 11:11 am / #
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('ul.controls li a');
controls.invoke('observe', 'mouseover', this.events.mouseenter);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.name, this.scroller, { duration:this.options.duration });
Event.stop(event);
var botones = this.wrapper.getElementsBySelector('ul.controls li a');
for (var s = 0; s
Alvaro / September 28th, 2007, 11:12 am / #
Great script, thanks for your work. Still having problems getting the autoglide function to work can somebody give me hand in showing me were and what I need to do.
Thanks
Matt / October 9th, 2007, 5:25 pm / #
@ Matt
Change
var my_glider = new Glider(’my-glider’, {duration:0.5});
to
var my_glider = new Glider(’my-glider’’, {duration:0.5, autoGlide: true, frequency: 5});
Bluegold / October 11th, 2007, 6:02 pm / #
Bluegold
Thanks for the help. I was wondering if there is away for the user to pause and resume the auto glide feature.
Matt / October 12th, 2007, 12:43 pm / #
Hi Bruno, this is excellent, and really useful.
I’ve got one small issue, which is probably not even something specifically caused by the javascript. I know you’ve said to not use scrollbars with iframes. I’ve got a div within one of the sections with overflow:auto, and that seems to cause havoc as well.
Everything is absolutely perfect in Safari, but Firefox and Camino throw a scrollbar up to the right, even when the rest of that section is out of view. I’m guessing this is something to do with how Gecko renders scrollbars - drawing them over the top of any other elements, but on the off chance, do you (or anyone else in these comments) know of any workarounds?
You can see what happens here (the toggle is the comments link)
http://nathan-adams.net/album/index.php?showimage=1
(I have no idea how the scrollbar looks in IE, btw)
Nathan / October 14th, 2007, 2:04 am / #
How to add/change .active class dynamically into html as user clicks through sections?
Timi / October 19th, 2007, 5:09 am / #
Hi, good job ! But I have one question: is there a way to have the ability to scroll 3 items at a time? I try but I failed. Nevertheless, congratulations! See you.
Thierry / October 27th, 2007, 4:08 am / #
This is a great bit of script, but can anyone tell me what specific bits of prototype.js and effects.js are required since these two file are enormous -surely glider can’t need the whole lot?
Lisa / October 29th, 2007, 8:13 pm / #
Could anyone help me to make this work? See glider example. I just need the tabs to be selected when current section is shown, if possible also switch tabs when you use the “next” / “previous”. I’m not really a js master so the work i did, didn’t work :(
Thanx a lot!!
Hans / April 1st, 2008, 9:17 am / #
Hi everyone, I’ve have to create a slideshow and I’m finding way to create a “perfect loop”.
Now it happens that when displays the last section it comes back to the first (insted of going on).
Could someone help me?
Thnks
R.
Raffaele / September 17th, 2008, 2:02 am / #
Post a comment