Slidebox – jQuery banner rotator
Slidebox is a classic, simple jquery/css banner rotator/slideshow featuring slide captions, next and previous slide buttons, slides micro-thumbnails, carousel-like rotation and auto-slideshow.
How to use it
Download slidebox archive which contains the plugin files, as well as examples and some demo graphics. Extract files and upload jquery.mSimpleSlidebox.js, jquery.mSimpleSlidebox.css and the images, icons etc. you’ll use (if any) to your web server.
Include jquery, jquery UI, jquery.mSimpleSlidebox.css and jquery.mSimpleSlidebox.js in your html document
<link rel="stylesheet" href="jquery.mSimpleSlidebox.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script src="jquery.mSimpleSlidebox.js"></script>
The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance). In either case, it’s more efficient to include the css file before any javascript (usually inside the head tag). Notice that we’re using Google’s CDN to get jquery and jquery UI libraries (why?).
What these files do
jquery is the javascript library used by the slidebox plugin (I’m making the crazy assumption here that you do know what jquery is. In case you don’t, here it is).
jquery UI (jQuery User Interface) extends jquery library and provides animation easing (you can make your own custom jquery UI bundle if you wanna cut down the size, see http://jqueryui.com/download).
jquery.mSimpleSlidebox.js is our plugin file (this does all the tricks)
jquery.mSimpleSlidebox.css is the css file we use to style our slideboxes. You could of course put slidebox styling in your main stylesheet document to reduce http requests.
Insert slidebox markup in your html body
<div class="slidebox"> <ul> <li> <div>slide 1 content</div> </li> <li> <div>slide 2 content</div> </li> <li> <div>slide 3 content</div> </li> <li> <div>slide 4 content</div> </li> </ul> </div>
Each slidebox is marked-up as an unordered list (<ul>
), wrapped in a div which can have any id or class name (in this case .slidebox
). Each list item (<li>
) represents a single slide and each slide contents are within a div (or any element of your choice). Simple and clean.
Call mSlidebox function on document ready or window load (after the inclusion of the plugin files), either in the head or body tag
<script> (function($){ $(document).ready(function(){ $(".slidebox").mSlidebox(); }); })(jQuery); </script>
The .slidebox selector used here could be anything you want (any id, class name etc.) as long as it’s the same in your slidebox(es) markup. Note that we’re wrapping our jquery code with (function($){ ... })(jQuery);
. This ensures no conflict between jquery and other libraries using $
shortcut. See Using jQuery with Other Libraries for more info.
Calling our function on document ready ($(document).ready()
) is the standard, most common way used. It roughly means that our code will execute after the DOM is ready. When manipulating images or document sections that contain images and other objects that load separately, it is best to use window load ($(window).load()
) so the code executes after all page elements are fully loaded.
In the example below, slidebox plugin will be applied after all page elements (such as slide images, backgrounds etc.) are fully loaded:
<script> (function($){ $(window).load(function(){ $(".slidebox").mSlidebox(); }); })(jQuery); </script>
That’s pretty much all the basics you need to do in order to use the plugin.
Final result example
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="jquery.mSimpleSlidebox.css"> </head> <body> <div class="slidebox"> <ul> <li> <div>slide 1 content</div> </li> <li> <div>slide 2 content</div> </li> <li> <div>slide 3 content</div> </li> <li> <div>slide 4 content</div> </li> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script src="jquery.mSimpleSlidebox.js"></script> <script> (function($){ $(document).ready(function(){ $(".slidebox").mSlidebox(); }); })(jQuery); </script> </body> </html>
Configuration
mSlidebox function can get the following option parameters in order to customize its behavior and basic functionality:
autoPlayTime: Integer |
The time of auto-playing next slide, value in milliseconds |
animSpeed: Integer |
Slide transition/animation speed, value in milliseconds |
easeType: String |
Slide transition/animation easing type, see jquery UI easing for all available easing types |
buttonsPosition: String thumbsPosition: String |
Position of slidebox next/previous buttons and slides thumbnails, values: "inside" , "outside" . Example: controlsPosition:{ buttonsPosition: "inside", thumbsPosition: "outside" } |
pauseOnHover: Boolean |
Pausing auto-slideshow when cursor is over slidebox area, values: true , false |
numberedThumbnails: Boolean |
Display numbers inside slides thumbnails, values: true , false |
An example of defining these options parameters and their default values is as follows
$(".slidebox").mSlidebox({ autoPlayTime:7000, animSpeed:1000, easeType:"easeInOutQuint", controlsPosition:{ buttonsPosition:"inside", thumbsPosition:"inside" }, pauseOnHover:true, numberedThumbnails:false });
Style & Design your Slidebox
You can style your slidebox(es) using the jquery.mSimpleSlidebox.css file which contains a basic style for any slidebox with class name .slidebox
. I suggest keeping this basic/minimum styling and doing your custom styling over an additional class name, id etc. For example, you could give an additional class (e.g. myClass
) to your slidebox:
<div class="slidebox myClass"> ... </div>
Then, in your stylesheet you could define all your custom styling using .myClass
. This way your slidebox has all the basic styling (via .slidebox
) and all your custom design via your class name (.myClass
).
You can also have a separate styling and design for each of your slideboxes on the same page, either by giving them different class names or ids or simply by targeting them in your css like this:
.slideboxContainer_1 ul li{ /* 1st slidebox slides style... */ } .slideboxContainer_2 ul li{ /* 2nd slidebox slides style... */ } .slideboxContainer_3 ul li{ /* 3rd slidebox slides style... */ }
…and so on. Each slidebox in your document is automatically wrapped in a div with class its index number, in the form of slideboxContainer_+index number
(e.g. slideboxContainer_1
). This way you can easily use those classes to style each slidebox.
The same goes for styling differently each slide of any slidebox:
.slideboxContainer_1 ul .slideboxSlide_1{ /* 1st slidebox 1st slide style... */ } .slideboxContainer_1 ul .slideboxSlide_2{ /* 1st slidebox 2nd slide style... */ } .slideboxContainer_1 ul .slideboxSlide_3{ /* 1st slidebox 3rd slide style... */ }
…and so on. Each slide also gets automatically an additional class with its index number. So for example, if you have 3 slideboxes on your document and you wanna style the 4th slide of the 2nd slidebox, you can easily do it by:
.slideboxContainer_2 ul .slideboxSlide_4{ /* ... */ }
In general, you can style your slideboxes and everything in them in many ways and however you like (class names, nth selectors, using +
or ~
etc.). You can really go berserk on styling and do some pretty complex stuff 😉 The download archive contains the styling I’ve done for the demo so you could use that and build on it.
For your convenience, I’m providing the final markup of a slidebox after it’s being processed by the script, so you can see the result and have a “blueprint” for styling:
<div class="slideboxContainer slideboxContainer_1"> <div class="slidebox"> <ul class="slideboxSlides"> <li rel="1" class="slideboxSlide slideboxSlide_1"> <div class="slideboxCaption"> ... </div> </li> <li rel="2" class="slideboxSlide slideboxSlide_2"> <div class="slideboxCaption"> ... </div> </li> <li rel="3" class="slideboxSlide slideboxSlide_3"> <div class="slideboxCaption"> ... </div> </li> </ul> <a href="#" class="slideboxPrevious"/> <a href="#" class="slideboxNext"/> <div class="slideboxThumbs"> <a href="#" class="slideboxThumb selectedSlideboxThumb" rel="1"/> <a href="#" class="slideboxThumb" rel="2"/> <a href="#" class="slideboxThumb" rel="3"/> </div> </div> </div>
Changelog
- Mar 14, 2012
- The original slidebox script has been greatly enhanced and optimized, as well as converted to a proper jquery plugin for easy implementation and customization
License
This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT
Donating helps greatly in developing and updating free software and running this blog 🙂
Is there any way to change the slide transitioning effect from linear to fade?
I had this working a treat, but now it seems to run through the slides and then continue increasing the left value as though there are more slides there, but all you see is empty space. Please could you give me an indication as to why this might be happening and some ideas on how to fix? Many thanks.
Can you send me a link or some test page where this happens?
Hi
Thank you For Nice slider
I am using this in SharePoint site
Now i Need to be upgrade Jqury1.6.4 to 1.8.3 version due to some reason
once i gave ref 1.8.3 slider is not working
do you have any suggestion or solutions
plz help me I am stuck here
The Slidebox is compatible with IE8 and old browsers?
Hello..
This is a great slider. Exactly what I was looking for.
Question. I need to be able to click on the rotating images to access a website for each one. Is there a way of adding an tag within the
I’ve tried a few ways, but they don’t work.
Thanks for the good work
Thank you, really like this slidebox.
I am having the same problems as other though. After the last slide, it does not go back to the first slide, a blank slide shows and it stay there unless I manually click on the previous button a couple of times.
I thought it was another js file on my site that was causing the problem, but when I click on the demo link above it does the same thing. The problem is with IE9 and Firefox, it works fine in Chrome.
Really want to use this. I clear my cache and tried 3 other machines with diffferent OS.
Thanks!
Jamil
Hi,
Firstly like to say what a great job you have done on this 🙂
I do have a slight issue and reading through the other comments I don’t seem to be the only one with this issue but I could not really find a solution.
In IE the slider just shows a blank screen once it shows its last image, where on firefox it restarts the loop from image 1.
I’ve tried this on 4 different computers all running IE and they all have the same problem.
Works fine on all other browsers.
Hope you can help or even advise.
Thanks in advance.
Sorry – my previous comment was stripped of the tags. Let’s try it again…
I’m having an issue where the slider picks up ANY and ALL
<li>
tags and turns them into a slider element. Slidebox should only grab the<li>
elements of the first child of the targeted element (i.e. “.slidebox”). How can I resolve this?I’m having an issue where the slider picks up ANY and ALL tags and turns them into a slider element. Slidebox should only grab the elements of the first child of the targeted element (i.e. “.slidebox”). How can I resolve this?
Hey Guys! How Ya doing? Well, I’m trying to combine in a same html page via dreamweaver8 the jQuery custom content scroller and this Slidebox jQuery banner rotator both that kindly malihu has shared with us. I’ve tried in different ways but nothing. Someone has tried before? Please let me know. Thank You!
this saves time. exactly what i need. do you have wordpress plugin as simple as this. this is great! thanks!
No wordpress plugin at the time, sorry.
Hi Malihu and thank you for this good script.
I just have a question:
I’m using the “plain_demo.html” and just set autoplay on true and pause on over on False, and it works very well, but I noticed that after I click on a thumb pagination it goes on the image I have chosen, but then it stops the entire animation.
So I would like that the animation doesn’t stop after I click on a thumb pagination…is it possible?
thanks
Alex
Hey, thankf for this! I just have one question !
It is possible to reload the script that generate the slider after an action. i.e. when I resize the page to adjust the width of the slider ?
Nope sorry. I’d need to update the code and add few methods/conditions. I’ll definitely add them on the next update. Thanks for the feedback.
Hi Malihu, thanks for this post, you’ve provided a fantastic solution which is easy to implement. Works seamlessly across multiple browsers and looks great on a web page 🙂 I’ve managed so set it up on our website as a rotating banner on the front page.
Thanks again
Si
This is great and very easy to use!
My one issue is that I want each image to have a hyperlink, but I do not want any textbox description over the image. Is there a way to have just the image as a link without the text? I’m new to all of this so I’m betting it’s an easy answer that I’m just not seeing. Thanks!!
You just place an anchor element inside each list item. For example:
<li style="background:url(your_image.jpg) no-repeat;"> <a href="#"></a> </li>
Thanks!
Thank you , it works fine in my website but i have a question…
how I can restart the slide when it comes to last?
Greetings from Perú
Diego.
Hi Malihu. I don’t fluent abt jquery. I added but just have basic/minimum styling. I want to use classic/additional styling but i dont know how to use it. Could you help me its code?? Thanks so much
Hi,
All the styling is done with CSS (no need for any javascript). Check post’s section “Style & Design your Slidebox” for a quick guide on styling your slideboxes.
Additionally, you can see the demo stylesheet: http://manos.malihu.gr/tuts/slidebox/simple_slidebox/jquery.mSimpleSlidebox.css that contains the additional styling I’ve done for the slidebox example and use that or build on it.
You’re so kind. Thank u. I’ll try ^^
Very hice, i like it!
hey Malihu,
Thanks for the great script! It saved me lots of time, and it’s clean and easy to modify.
I noticed as I was testing it out that the sliding may be messed up if the zoom is not at exactly 100%. Is there any way to fix or prevent this problem?
Thanks,
Camp
There not much we can do. jQuery animate and browser zoom can be a little off sometimes. Does it happen only on chrome or on other browsers too?
Hei………….malihu
I love u..means i love u as well as your work Dear its amazing and helpful to me solve my j query issues as well!!!
Regards,
Jay
Thanks Jay, you’re very kind 🙂