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

You are free to use, study, improve and modify this script wherever and however you like.
Creative Commons License All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.


178 Comments

Post a comment

Comments pages: 1 2 3 4

  1. Alfonso
    Posted on March 29, 2014 at 15:08 Permalink

    The Slidebox is compatible with IE8 and old browsers?

    Reply
  2. jeff
    Posted on January 1, 2014 at 06:17 Permalink

    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

    Reply
  3. Jamil
    Posted on June 28, 2013 at 18:44 Permalink

    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

    Reply
  4. Julian
    Posted on February 8, 2013 at 15:06 Permalink

    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.

    Reply
  5. Darren
    Posted on January 10, 2013 at 00:23 Permalink

    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?

    Reply
  6. Darren
    Posted on January 10, 2013 at 00:21 Permalink

    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?

    Reply
  7. Odiseo
    Posted on January 8, 2013 at 04:20 Permalink

    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!

    Reply
  8. Edmund Punongbayan
    Posted on October 26, 2012 at 13:31 Permalink

    this saves time. exactly what i need. do you have wordpress plugin as simple as this. this is great! thanks!

    Reply
    • malihu
      Posted on November 1, 2012 at 12:26 Permalink

      No wordpress plugin at the time, sorry.

      Reply
  9. Alex
    Posted on September 30, 2012 at 13:05 Permalink

    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

    Reply
  10. Benoit
    Posted on September 21, 2012 at 22:42 Permalink

    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 ?

    Reply
    • malihu
      Posted on September 26, 2012 at 12:46 Permalink

      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.

      Reply
  11. Mail Glue
    Posted on September 8, 2012 at 14:30 Permalink

    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

    Reply
  12. Jonathan
    Posted on September 6, 2012 at 18:07 Permalink

    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!!

    Reply
    • malihu
      Posted on September 7, 2012 at 16:40 Permalink

      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>

      Reply
      • Jonathan
        Posted on September 9, 2012 at 01:14 Permalink

        Thanks!

        Reply
  13. Diego
    Posted on July 19, 2012 at 21:04 Permalink

    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.

    Reply
  14. KuniBright
    Posted on July 16, 2012 at 09:25 Permalink

    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

    Reply
    • malihu
      Posted on July 16, 2012 at 23:13 Permalink

      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.

      Reply
      • KuniBright
        Posted on July 17, 2012 at 04:48 Permalink

        You’re so kind. Thank u. I’ll try ^^

        Reply
  15. Yussel
    Posted on July 14, 2012 at 07:03 Permalink

    Very hice, i like it!

    Reply
  16. Camp
    Posted on July 6, 2012 at 00:25 Permalink

    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

    Reply
    • malihu
      Posted on July 7, 2012 at 12:01 Permalink

      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?

      Reply
  17. jay
    Posted on July 3, 2012 at 17:00 Permalink

    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

    Reply
    • malihu
      Posted on July 3, 2012 at 21:35 Permalink

      Thanks Jay, you’re very kind :)

      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>

css.php