May 14 2009

Mootools Content Slider Class v2

21

classes, javascript, mootools

Note: There is an updated version of this class available.

Here's another update for my Mootools 'content slider class', along with several basic examples.  Sorry that it has taken so long to get this new version posted!

First of all, if you check out the class's code you'll notice that the use of 'bind' is gone.  I had always thought that was confusing stuff, even after I wrapped my head around it... and thanks to a little tip I read at David Walsh's site some time ago, I made use of declaring a 'self' variable instead.  (To all you Flash coders, this is similar to setting _lockRoot to true and then being able to use _root throughout externally loaded movies.)

Anyway, this content slider class works basically the same way as the old one – it's just easier to configure in multiple ways, and has a couple extra functionalities.  Here are the options available in this class:

slideTimer: 5000,  		//Time between slides (1 second = 1000), a.k.a. the interval duration
isPaused: false,		//flag for paused state
transitionTime: 1100, 		//Transition time (again, 1 second = 1000)
transitionType: 'cubic:out',	//Transition type
container: null,		//container element
items: null, 			//Array of elements for sliding
itemNum: 0,			//Current item number
numNavActive: false,		//Whether or not the number navigation will be used
numNavHolder: null,		//Element that holds the number navigation
playBtn: null,			//Play (and pause) button element
prevBtn: null,			//Previous button element
nextBtn: null			//Next button element

Again, everything is included in the demo files – so feel free to poke around and change things, etc.  And as always, I'm sure this code is far from perfect... so any and all criticisms/praises/etc. are welcome!  Note that I will read all comments, but unfortunately due to my crazy workload I will probably not have time to answer many questions.  (However, I may post a few 'advanced' examples on the demo page soon - including an alpha (fade in / fade out) version, a vertical version, a resizing version, etc.)

View Demo
Download Demo Source

Find This Post Useful? Share it!

Comments (21 Total)

Dennis Derammelaere
on Wed. Jul 22nd, 2009 7:27pm

Hi Daniel, Did all of the comments get lost when you switched over to the new design? Should I resubmit my questions? Thanks again for this! Dennis

Daniel
on Wed. Jul 22nd, 2009 8:10pm

Hi Dennis - yeah, unfortunatlely my comments were hosed when I migrated out of ExpressionEngine. Please ask your question(s) again!

Dennis Derammelaere
on Mon. Jul 27th, 2009 10:35am

Hi Daniel, OK, no problem. Here they are in order of importance:

1) When the slider is progressing through the series of slides and I click on a slide that is before the currently active slide, the slider reverses direction. So, the slider goes 1, 2, 3, 4. And, let's say #3 is currently active and I click on #2. After the pause on #2, the slider then goes to #1, then #4, then #3 and so on. Is it possible to make it so the slider only goes forward no matter which slide is clicked?

2) I would like to change the #1 slide in the navigation to say "Welcome", followed by 2, 3, 4. Is this possible?

3) I am building my site in Wordpress. When the page with the slider loads, it flashes the first slide for a split-second, then the slide disappears, and then the slideshow begins as it should. Do you think this is a Wordpress thing? Any suggestions? I will email you a link to my development site so you can see what I'm talking about.

Thanks so much for your help!
Dennis

Daniel
on Mon. Jul 27th, 2009 1:09pm

Hi Dennis,

For #1, just go to into the slideIt function, and look for the following:

if(self.options.itemNum > passedID) { 
    //self.direction = 0;
    self.direction = 1;                 
} else { 
    self.direction = 1;
}

I've commented out the line and replaced it with the same value as the other direction.

For #2, you could just set up an array to populate the button text... or even pull it from a 'rel' or 'title' attribute from your list of divs. Look for the place in the setup part of the class where I'm populating the numbered nav... and sub in the array values there instead.

For #3, it sounds like you need to preload things - just like I've done on my homepage. David Walsh has a sweet little 'dw_progress' MooTools class that works perfectly for this. That is actually going to be a blog post this week, so stay tuned for a step-by-step on doing that... (If you want to see an example now, take a look at the 'home_ignite.js' file I'm calling on my homepage.)

By the way, your new site design is looking really beautiful so far - I totally LOVE the color scheme!!

Dennis Derammelaere
on Mon. Jul 27th, 2009 1:54pm

Thanks for everything Daniel! I will definitely stay tuned for your next post.

Richard
on Tue. Jul 28th, 2009 3:49am

Hi Daniel, I've made some changes to this (excellent and useful!) class such that it now supports options for orientation (e.g. vertical), and fade on slide out. I have also added a feature such that if orientation == none then the slides will cross fade in place. I'd like to send you the updated class if you would like to update your download?

Regards, Richard.

oli
on Tue. Jul 28th, 2009 7:08am

Hi Daniel

can i set the contentslider to start automaticly without pressing the play button?

thanks

oli

Richard
on Tue. Jul 28th, 2009 7:20am

oli,
Try setting the option ispaused: false when you instantiate the class.

HTH
Richard.

Daniel
on Tue. Jul 28th, 2009 10:45am

Richard, that sounds great! I'll contact you via email so you can send it on over, and I'll update this post (and credit you, of course.)

Cheers!

oli
on Tue. Jul 28th, 2009 12:58pm

Hi Richard

thanks for your feed. just antoher question. i have allready those css clases used in my document. where do i have to change all the classes for the script? css for sure and also in the javascripts ?

thanks oli

Daniel
on Wed. Jul 29th, 2009 9:37pm

Oli, yes most of those css classes can be easily changed. The 'container' and 'items' options for this class can be whatever elements you wish, as long as they're properly styled for usage... Take another look at the js code in the demo, and I think you'll see what I mean.

Cheers! :)

Daniel
on Thu. Jul 30th, 2009 4:32pm

Andrew,

Richard was kind enough to email me his improved version, and I will post it here later this evening. (Many thanks, Richard!!)

Check back later tonight/tomorrow! :)

Daniel
on Sun. Aug 2nd, 2009 12:34pm

@Andrew -

Maybe you haven't noticed it yet, but there is a new blog post with Richard's version available... it has been posted for a few days now.

(Also note that you were auto-marked as a spammer due to your last comment being nearly identical to the one before it.   ;)

Andrew
on Sun. Aug 2nd, 2009 12:36pm

Thanks Daniel! :))

Daniel
on Sun. Aug 2nd, 2009 12:40pm

Hehe, no problem Andrew... I think we should both thank Richard! Hope you find it useful.

Andrew
on Sun. Aug 2nd, 2009 12:43pm

@Daniel

Now I found it! ;) Many thanks!

Regards,

Graham
on Wed. Aug 5th, 2009 5:40pm

Hi, Love the slider effect, ive tried to alter the number navigation to for example Link 1 | Link 2 | Link 3 etc but still no luck?

Cheers

Will
on Thu. Aug 6th, 2009 5:20am

Hi, Thanks for a great script!

I'm just wondering how can I delay the initial animation?

self.slideIt(self.options.itemNum);  //initialize first slide

I'd like to set the container to have background of first image and then set "itemNum" to 2.

Should I use Chain.Wait for this? http://mootools.net/docs/more/Class/Chain.Wait

Thanks

Daniel
on Thu. Aug 6th, 2009 9:15am

@Will - I'm not sure I follow your question(s)... sorry, man. 

(And please note:  an updated version of this class has been posted for several days now...)

Daniel
on Thu. Aug 6th, 2009 4:23pm

@Graham -

Look for the following code in the initialization function:

var numLink = new Element('a', {
                    'class': 'numbtn',
                    'html': (i+1)  
});

and change the 'html' line to this:

'html': 'Link ' + (i+1)

I waited a day or so before responding just to see if you could figure it out on your own... hehe. ;)

Daniel
on Mon. Aug 10th, 2009 12:48am

Note: To keep things up-to-speed and avoid confusion, I've closed comments on all older versions...  Please direct any future comments to the post with the latest slider version.

Comments have been disabled on this post, please email me if needed.