Updated Mootools Content Slider Class v2

classes, css, mootools, xhtml

Thanks to the efforts of one of the readers here, Richard Cooper, I am happy to post an updated version of my content slider class.  This latest update adds the option to perform both horizontal and vertical scrolling, as well as fading or even a combo slide/fade transition! 

Usage

Not much has changed since the last version, just a few new options. 

The XHTML

<div id="container">
   <div class="item">
      <h3>Item 1 Title</h3>
      <p>Content in here.</p>
      <p><img src="images/fpo_img.jpg" alt="tester image" /></p>
   </div>

   <div class="item">
      <h3>Item 2 Title</h3>
      <p>Suspendisse lectus massa nunc.</p>
   </div>
   .
   .
   .
</div><!-- end container div -->

<div id="controls">
	<div class="prev_btn">&lt; prev</div>
	<div class="next_btn">next &gt;</div>
	<div class="play_btn"></div>        
	<div class="num_nav"><ul></ul></div>
</div>

Nothing to it, really.  Just a container div, some divs inside it with your content elements, and some contols (if you want them.)  You can give the container and content elements any id and/or class you desire, as long as you reference them correctly when instantiating the class.  The control buttons (play/next/num. nav) are the only ones you can't change.

The CSS

/*  container setup */
#container {
    position: relative;
    margin: 30px 0 10px;
    width: 500px;
    height: 300px;
    overflow: auto;
    background-color:#333;
    left: 150px;
    border: 4px solid #666;
}

.item { display: block; width: 500px; height: 300px; }
.item h3 { font-size: 16px; margin: 10px; color: #0CF; }
.item p { font-size: 13px; padding: 6px 10px 12px; }


/* controls styling */
#controls1 {
    display: block;
    padding: 10px;
    position: relative;
    margin: 12px auto;
    width: 500px;
}

.prev_btn,
.next_btn {
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color:#AF4B32;
    border: 1px solid #80301D;
    background-color:#513328;
    float: left;
}
.next_btn { float: right; }

.play_btn {
    clear: both;
    width: 100px;
    height: 25px;
    margin: 0 auto 12px;
    line-height: 25px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color:#AF4B32;
    border: 1px solid #80301D;
    background-color:#513328;
 }

.num_nav { text-align: center;}
.num_nav ul li { display: inline; margin: 0 2px; }
.num_nav ul li a {
    padding: 2px 3px;
    color:#AF4B32;
    border: 1px
    solid #80301D;
    background-color:#513328;
}
.num_nav ul li a.active,
.num_nav ul li a:hover { border-color: #fff; 
background-color:#80301D; }


.btn_over {
    color:#fff;
    border: 1px solid #fff;
    background-color: #80301D;
}

Keep in mind that these are mostly just default styles, the same ones that I'm using in the demos.  Style things however you like – the main thing is to define the width and height of your container box and content items.

The Javascript

First, you need to include MooTools and the slider class:

<script type="text/javascript" src="your-path-to/moo_12.js"></script>
<script type="text/javascript" src="your-path-to/sl_slider.js"></script>

Then, just instantiate the class inside a 'domready' wrapper, like usual:

window.addEvent('domready', function() {
       
    //slider variables for making things easier below
    var itemsHolder = $('container');
    var myItems = $$(itemsHolder.getElements('.item'));
   
   
    //create instance of the slider, and start it up       
    var mySlider = new SL_Slider({
        slideTimer: 4000,
        orientation: 'vertical',
        fade: true,
        isPaused: false,
        container: itemsHolder,
        items: myItems
    });
    mySlider.start();
               
});

Please note that the example above is minimal, but the full list of available options (and corresponding default values) are as follows:

 

//Time between slides (1 second = 1000), a.k.a. the interval duration
slideTimer: 8000,

//vertical, horizontal, or none: None will create a fading in/out transition.
orientation: 'horizontal',

//if true will fade the outgoing slide - only used if orientation is != None
fade: false, 
          
isPaused: false,       //flag for paused state

transitionTime: 1100,  //Transition time (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

That's pretty much it!  Check out the demo for some working examples, and feel free to download the source and use in your projects – both commercial and personal.  No attributions are required for usage, I only ask that you do not re-distribute or sell this code as your own.  I also like seeing where it's being used, so email me links to your projects when they go live... I may end up featuring several of them in the near future!
 

 

Note: Due to my extreme workload, I really cannot provide any further help with this – unless you want to pay me hourly, of course.  *grin*   (Please email me if that's the case...)

Like This Post? Share it!

Find This Useful? Buy Me A Coffee!


Comments (10 Total)

on Fri. Jul 31st, 2009 2:48am

Glad you like it! :)

on Fri. Jul 31st, 2009 5:34am

Great work, really better, thanks!

Bachir
on Sun. Aug 2nd, 2009 5:19pm

Great work! i'm using it and it's a breeze but I have an issue though (more a question than an issue really): In my case, the content of the slider are images with links to other pages of my site. Is there any way to go back to the proper page when using the navigator's back button (or a button I create for that matter) or when refreshing the page? I mean, let's say the user is on the 18th page of the slider and clicks on a link. When he goes back to the slider, he's on the first page again which is not very user-friendly... Any advice on this? Thank you.

on Sun. Aug 2nd, 2009 6:12pm

Hi Bachir, and thanks!

To achieve what you're wanting to do, I would probably make use of a session variable (or cookie, etc.) to keep track of the active slide number – and then use that value to dynamically set the 'itemNum' option (when instantiating the class) each time the page loads.  

Sorry, I can't really help you any further than that right now...but that should point you in the right direction.

Bachir
on Tue. Aug 4th, 2009 1:21pm

hello and thank you for your answer!

I tried to do what you told me and thanks to you, I'm able to feed "itemNum" with a php session variable and then display the proper slider's page (which is the point, isn't it?).

But there's a catch... The tricky part is to feed the php variable with the itemNum in order to memorize the page I'm sliding to. There is no point to feed the itemNum with a php session variable when this one remains empty as, as far as I know, there is no way to feed php from javascript. This is the whole client-side php /server-side javascript story. The only thing I see is to pass the javascript variable through the url to refresh the php session but I just don't see how I can code this inside your script. I mean, each time I click on a slider's page, the url should be modified accordingly (ex: ...index.php?page=4).

If i succeed in doing this, I get what I need! Is it possible to do so whitout being a javascript guru, which I'm obviously not? PS: cookies are not an option unfortunately.

Thanks for your help!

on Tue. Aug 4th, 2009 5:56pm

Hi Bachir,

It seems like you are getting close! I would suggest making a call to a PHP function from MooTools (via an AJAX request) to handle setting the variable/pagenumber. (You would want to make the AJAX call each time the 'slideIt' function is called.)

I am covered up with work right now, otherwise I would try to implement it myself. Maybe in the next couple of weeks I will attempt it...

Bachir
on Tue. Aug 4th, 2009 6:36pm

Thanks Daniel, I will explore your suggestion (to be honest, I was already exploring httpRequest possibilities here ;-).

Just a noticeable thing here... adding this:
'href': 'mypage.php#' + (i+1)

just after: 'html': (i+1),

in the js file of yours allows me to dynamically change the url accordingly as I slide to another page.

ie: when sliding smoothly to the 8th page, I get "www.mysite.com/mypage.php?#8

I don't know a thing about javascript but this is an interresting "try and guess" discovery for me. Now, I'm trying to get the value after the hash to store it in my php session which leads to other issues as a hash can't be processed directly by the server (same old story)... That's an option I'm still working on but something tells me I'll have to explore yours very soon ;-).

As soon as I get something, you'll know it.

Regards.

Jan
on Mon. Aug 10th, 2009 8:17pm

Hi Daniel, love this script, it's almost exactly what I've been looking for.

Just one question (or maybe a feature request?): Is there an esay way to add "titles" to the content elements that are than displayed instead of the page numbering? Ideally, I'd like to highlight the title that goes with the content element that's currently displayed. Thanks, Jan

Nigel
on Fri. Aug 14th, 2009 4:34am

Great work on the script, its really well made and versatile. I just had one idea, would it be possible to pause the scroller when you hover over it? That way when people are reading an item it wont scroll off. Thanks Nigel

on Fri. Aug 14th, 2009 9:43am

Jan and Nigel - thanks for the compliments! 

Unfortunately, I'm too covered up with client work (and summertime) to help right now.. so I will have to consider those as feature requests for a later version.

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