This website uses cookies to personalise ads and to analyse traffic ok
web design

Slidebox – jQuery banner rotator

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.
http://opensource.org/licenses/MIT


182 Comments

Post a comment

Comments pages: 1 2 3 4

  1. Tom Smith
    Posted on June 18, 2012 at 14:09 Permalink

    Hi malihu,

    This is fantastic code and has helped me a lot with the site I am building. One query I was wondering if you could help me with was I am trying to add in a link on the first slider but the link just isnt being picked up am I missing a trick the link to the test site is: http://www.voodooagency.com/expresscircuitsgroup/

    Thanks in advance for your help.

    Kind Regards,
    Tom

    Reply
  2. Derek
    Posted on June 12, 2012 at 18:26 Permalink

    I have this implemented on my site, but I am wanting to have a slide count (ie: showing slide 1 of 10). Can someone assist me with this?

    Reply
  3. Marcelo Macedo
    Posted on June 5, 2012 at 19:07 Permalink

    Hi
    Amazing script! Really thanks for sharing
    I just have one question, jquery ui is too big for me
    Would you mind tell us which classes are you using?

    Thanks in advance!

    Reply
    • Marcelo Macedo
      Posted on June 5, 2012 at 19:15 Permalink

      Found by try and error:

      “../css/jqueryui/minified/jquery.effects.core.min.js”
      “../css/jqueryui/minified/jquery.effects.blind.min.js”
      “../css/jqueryui/minified/jquery.ui.position.min.js”

      Reply
    • malihu
      Posted on June 5, 2012 at 19:46 Permalink

      Hi,

      I always prefer loading jQuery and jQuery UI from Google’s CDN. It doesn’t matter if the UI is too big as it is probably cached meaning zero load time. I normally load it from CDN and have a local fallback (see code below).

      I can’t find any real disadvantage using Google’s CDN other than Google servers going down. If Google goes down, the web will suffer much bigger problems than websites failing to load jquery.

      <!-- Get Google CDN's jQuery and jQuery UI with fallback to local --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script>!window.jQuery.ui && document.write(unescape('%3Cscript src="js/jquery-ui-1.8.13.custom.min.js"%3E%3C/script%3E'))</script>

      Thanks for your comments 🙂

      Reply
  4. mark
    Posted on June 4, 2012 at 09:50 Permalink

    It workerd Thanks for sharing thanks thanks again…

    Reply
  5. Rob
    Posted on May 24, 2012 at 15:19 Permalink

    Is it feasible to have a box within the slide which links to a sub page.

    So for example “Click here for more info”?

    Course this changing per slide

    Reply
    • malihu
      Posted on May 24, 2012 at 23:55 Permalink

      Yes of course. You can have anything you want inside the div of each list element. e.g.:

      <li><div>anything here...</div></li>

      Reply
  6. Damith
    Posted on May 23, 2012 at 05:25 Permalink

    I want to use this with fade in and fade out effects. Please help me.

    Reply
  7. cem
    Posted on May 22, 2012 at 19:16 Permalink

    Hi,

    I couldn’t figure out completely what I need to do? do you have a sample code (template) that I can only copy and paste. Can I open this with Frontpage (microsoft) or do I need flash?

    Thank you.

    Reply
    • malihu
      Posted on June 2, 2012 at 14:42 Permalink

      You can edit this with any text editor you want (a notepad will do). This is javascript so you don’t need flash.

      Reply
  8. Dave Welsh
    Posted on May 13, 2012 at 20:24 Permalink

    Hi Malihu,

    Firstly, thanks for sharing this code – relatively simple to a non-coder like me, and does what it’s supposed to do very well.

    I wanted to find out if you could suggest how I would go about adding a ‘Caption Title’ with separate style control.

    Basically, I’d like to have two slideboxCaption elements – one that contains the title of that particular slide, and another which would contain ‘body text’ for that slide. I would then be able to format and position each caption container separately.

    Would this be relatively easy to implement by editing your CSS?

    TIA,

    Dave

    Reply
  9. Fahid
    Posted on May 12, 2012 at 20:26 Permalink

    How do i trigger an event on slide change??

    Reply
    • malihu
      Posted on May 13, 2012 at 01:17 Permalink

      Hi,
      I made some minor additions to the script (easier to do than write about them) to attach a function on slide change. Download the updated script here:
      http://manos.malihu.gr/tuts/slidebox/temp/slidebox_onSlideChangeFn.zip

      Inside the zip there’s a demo html page where you can see how to use the extra parameter onSlideChange.

      Hope this helps

      Reply
      • Fahid
        Posted on May 13, 2012 at 09:48 Permalink

        @Malihu: Thanks a ton 🙂

        Reply
      • Fahid
        Posted on May 13, 2012 at 10:11 Permalink

        also how to identifiy the active banner element,
        for eg if i add a class on each then how do i determine the active dom element ??

        Reply
  10. Husnain
    Posted on May 7, 2012 at 11:20 Permalink

    Hi. Great work, i have a problem when i click on the thumbnail, and try to use thumbnail for slide to change the auto transition stops working can you sort out this

    Reply
    • malihu
      Posted on May 7, 2012 at 12:30 Permalink

      Hello,

      The auto-slideshow is meant to stop when the user interacts with the slidebox (other than hovering mouse over it). This behavior is derived from usability guidelines and it should not change.

      When a user clicks a slide thumbnail or the next/previous buttons, it means that he intends to view and read that specific slide. Changing that slide (selected by the user) to the next one (by re-starting the auto-slideshow), without any kind of user input, is a major usability error.

      Occasionally, I’ve found myself navigating and viewing a slide that interests me and few seconds later it auto-slides to the next one, which is one of the most annoying things and really unnecessary.

      Reply
  11. jacob
    Posted on May 5, 2012 at 19:38 Permalink

    good tutorial. i will use it for my next project

    Reply
  12. Bilaal
    Posted on May 2, 2012 at 03:24 Permalink

    Hi. How can I change the transition type, now it is from tha right to the left, and how can I change it to the opposite (from the left to the right)?
    Thanks!

    Reply
    • malihu
      Posted on May 2, 2012 at 03:49 Permalink

      Hi,
      Unfortunately, you can’t (at least for now).
      This is a simple/basic script that features only one type of transition. The most common one, which is from left to right (derived from the way text “moves” in relation to a human eye when reading).
      In the future, I’ll post a more advanced slidebox I’ve made that features (among others) many transitions types.

      Reply
  13. Phillip Pace
    Posted on April 28, 2012 at 09:03 Permalink

    Hey Malihu,

    Please ignore my comment. I’ve found the css within your style sheet.

    Cheers

    Reply
  14. Phillip Pace
    Posted on April 28, 2012 at 04:38 Permalink

    Hi Malihu,

    One question that I do have is about the text captions on each image within a slideshow.

    On your demo the text captions are placed in different places on each image. How would I change it so that the caption for all images are only in the one place?

    Cheers

    Reply
  15. Phillip Pace
    Posted on April 28, 2012 at 01:31 Permalink

    Hi Malihu,

    It is a real blessing that there are developers like you on the Net. Very simple, not over complicated and a slideshow script that actually works!

    Great job mate and thanks again for sharing this code.

    Phil

    Reply
  16. Phillip Pace
    Posted on April 28, 2012 at 01:31 Permalink

    Hi Malihu,

    It is a real blessing that there are developers like you on the Net. Very simple, not over complicated and slideshow script that actually works!

    Great job make and thanks again for sharing this code.

    Phil

    Reply
    • malihu
      Posted on April 28, 2012 at 02:40 Permalink

      Thanks Phillip, you’re very welcome 🙂

      I’m trying not to over-complicate plugins and add additional stripped-out (non-styled) demos to save time for the experienced developers and designers.

      I love sharing 🙂

      Reply
  17. Jeff
    Posted on April 12, 2012 at 15:49 Permalink

    I was having a problem with my last slide not showing until I scrolled past it once, I noticed the total width would jump from 3 times the width ( I have 3 slides) to 4 times and after that happened It would show up. so on line 56 of the JS file i added the width to the total one more time and now its working ok. I havnt tested on all browsers yet but on FF Safari and Chrome its working, the only issue is that it adds another width after you scroll so when it resets back to the first slide it takes a bit longer, not a big deal to me.
    Line 56 slideboxTotalWidth=(index+1)*slideboxWidth;
    My Line 56 slideboxTotalWidth=(index+1)*slideboxWidth+slideboxWidth;

    Reply
    • Jeff
      Posted on April 12, 2012 at 16:17 Permalink

      but that breaks scrolling left. hrmmmm

      Reply
  18. Tammy
    Posted on March 20, 2012 at 20:59 Permalink

    Yes I think it would be great to have an option to dispaly numbers are not and would very much appreciate if you would add such a feature. Many Thanks!

    Reply
    • malihu
      Posted on March 24, 2012 at 02:52 Permalink

      Done 😉

      I’ve updated the post, demo and archive (re-download to get the updated files).

      Adding
      $(".slidebox").mSlidebox({ numberedThumbnails:true });
      will display numbers inside slides thumbnails (default is false).

      Reply
      • Tammy
        Posted on March 27, 2012 at 18:04 Permalink

        Thank you soooooooooo much. Works great. Will buy you some coffee next pay check!

        Reply
    • malihu
      Posted on March 27, 2012 at 18:11 Permalink

      Thank you 🙂

      Reply
  19. Tammy
    Posted on March 15, 2012 at 17:16 Permalink

    Are the thumbs suppose to have numbers in them? If so they are not dispalying … any ideas as to what I should do – what do I need to provide? If not – is there a way to have them be numbered?

    Great script!

    Reply
    • malihu
      Posted on March 15, 2012 at 23:59 Permalink

      I’ve removed the numbered slides thumbnails after the update, since I found no real reason for displaying them. I don’t see how a user benefits from seeing the number of the slide inside the micro-thumbnail, since most slideshows are used for latest news, featured articles etc.

      This said, I could add an option to display or not the numbers inside thumbnails, so let me know if you’d like such feature.

      Reply
  20. Justin
    Posted on March 13, 2012 at 10:42 Permalink

    Malihu Hi! – any idea of when that version 2 of this will be avail … id be more than happy to puchase if needed.

    Reply
    • malihu
      Posted on March 14, 2012 at 01:20 Permalink

      Hi Justin,

      I’ve just updated the script, so check the demo and post and make sure to re-download the archive.

      You don’t need to pay anything as everything here is free. If you feel like it, you can make a donation via the “buy me a coffee” link. Cheers!

      Reply
  21. Arkdae
    Posted on March 9, 2012 at 17:38 Permalink

    Hi !
    Thanks for this jQuery banner rotator but I have one question, I woul’d like to know how to install 2 Rotators on the same page but with different size, folder and of course pictures.

    I try to duplicate and rename all the css rules but it didn’t work.

    Thanks

    Reply
    • malihu
      Posted on March 14, 2012 at 01:25 Permalink

      Hi,
      Please re-download the updated slidebox plugin. It includes a demo with multiple slideboxes (see multiple slideboxes demo) on a single page. I’m in the process of expanding this post with additional guides on implementation and styling slidebox.

      Reply
  22. Massimo
    Posted on March 9, 2012 at 17:06 Permalink

    Thanks a lot for this free slidebox. Your blog is so cool and it helps me a lot. 😉

    Reply
  23. Justin
    Posted on March 9, 2012 at 16:37 Permalink

    Wow stupid me. I forgot to clear my browser cache. I’ve got it working now.

    Thanks,
    Justin.

    Reply
  24. Justin
    Posted on March 8, 2012 at 23:37 Permalink

    I love how simple this script is, you did a great job. I do have one question. How am i able to increase or decrease the number of items in the slide show?

    Thanks,
    Justin.

    Reply
  25. Pedro Azambuja
    Posted on March 8, 2012 at 02:58 Permalink

    Can u send me a email to explain my problem…. I make an website but its work fine and dont work in ie and chrome…

    Hope u send me a mail to explain u the problem.

    Sorry my english 🙂

    Best Regards,
    Pedro Azambuja

    Reply
  26. Justin
    Posted on March 5, 2012 at 13:21 Permalink

    Hiya – loving this – thanks so much, ive found it really easy to intergrate as well.

    My question (If you could please help me) – at the end of the slidebox it reverses the content back to the first image/content … is there an easy way I could just have it loop (like a carousel) … ie: not slide all the images to the first image?

    thanks, Justin

    Reply
    • malihu
      Posted on March 6, 2012 at 18:53 Permalink

      Hello Justin,

      I’m in the process of updating the script and write a proper post about it. I’ll also add a far more advanced version of it (as plugin) that does among others exactly what you suggest. It’ll be ready soon so check here again 🙂 Thanks!

      Reply
  27. Mark
    Posted on February 17, 2012 at 01:03 Permalink

    Just stumbled upon this – took 5 minutes to add, doesn’t get much easier than that.

    thanks for the great work.
    mark

    Reply
  28. Peter
    Posted on February 14, 2012 at 15:22 Permalink

    Hi Malihu,
    Like some previous entries, i’m tring to go from slide 4 back to 1 but not having to scroll through all the other images.
    Have you come to a simple solution for this, i am not a code master, more of a visual guy.
    Thanks
    Pete

    Reply
    • malihu
      Posted on March 14, 2012 at 01:28 Permalink

      I’ve just completely revamped the script and among others, it features carousel-like rotation. Please check the post and re-download it 😉

      Reply
  29. Jihair
    Posted on February 14, 2012 at 00:01 Permalink

    Thank you

    Reply
  30. Zizi
    Posted on January 30, 2012 at 23:52 Permalink

    Thanks so much for this! Can video be added as well? Like from youtube or vimeo?

    Reply
    • malihu
      Posted on January 31, 2012 at 12:54 Permalink

      You can put anything you want inside the .content divs

      Reply

Comments pages: 1 2 3 4

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php