Sometimes, We Write Stuff...
Mootools Div Slider With Basic Controls
Due to the amount of redundant questions about old versions of the content slider, I've deleted the old versions from my site (such as this one) to eliminate further confusion.
Please visit the latest version, located here: Latest Content Slider Version.
Promote This Article
+ Comments
You are more than welcome, Jarvis!
I'm quite new at this tutorial writing thing, but I am enjoying it... expect more soon!
Nice work. Found your site searching for a slider and got a form script as a bonus.
Had one question about this new slider. How would one address slides directly? Say I wanted to jump to slide 2 or slide 4 or back...
ThanksHi Blake,
It shouldn't be very hard. Basically, you'll want to change the value of 'curItem' to the slide you want to jump to. (As opposed to just incrementing or decrementing the value via the prev/next calls.)
If I get some extra time this week, I will make an example to show you what I mean.
Hi Daniel, I would like to add an FX request to Blake's idea for having numbered slides and being able to jump to them. Can you make it to where the buttons/tabs for each slide highlight when that slide is being shown? (ex: the slider on http://www.webmd.com/) I've been trying several things to get this effect, but I keep coming up with glitches. Any input you can give me will be GREATLY APPRECIATED!! BTW..your tutorials are wonderful!!
How would one go about making this scroll vertically instead of horizontally.
Also, possible to modify this so that it stops at the last one? Or when it reaches the last one, instead of going again to the first one with the same animation using the next button (makes it seem as if it goes on and on) give it a different effect such as rewinding to the first one backwards?
Great work btw!
Great work, looks perfect for a "Latest Results" thingy I have to do. Thanks a mill for posting.
Cheers,
Cormac
Hi all, glad some of you found good uses for this! I'll be posting this as a class soon, so stay tuned...
It'd be great to have the ability to use links to navigate thru the number of slides. (for instance "slide1" "slide2" "slide3" as links) and when you press the links they slide either left and right. Stopping on the slide.
if you can do this, let me know! thanks!
Great stuff, one question: How could you remove the play function from the code, I don't wan't the play command in the script I just want the user to be able to press for more info.
keep up the good work!
regards elepdro
You could do this the ugly way like this: var slideTimer = 5000000000000;
To set the var slideTimer to a verry high number, though you would do this the "beuty" way 
Just a small thing that I've noticed with this: If you change the name of the item divs, it appears to break. To reproduce this, just change your
<div class="slide_item">
To:
<div class="slide_items">
And then in the css change:
var items = $$('.slide_item');
To
var items = $$('.slide_items');
And the script no longer works. I can't find anything that doesn't reference the items var, so I'm not sure what else could be causing this. Any ideas?
Cheers, Cory
Here's a preview of your comment: