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. Abhijit Chaore
    Posted on January 11, 2012 at 10:34 Permalink

    Hi,

    I found that this script is not working with IE9. Can you please try to fix it? Otherwise it is a fantastic piece of code. Thanks.

    Reply
    • malihu
      Posted on January 11, 2012 at 18:13 Permalink

      I’ve tested the demo on IE9 and it works as expected.

      Reply
  2. Mike
    Posted on December 17, 2011 at 19:21 Permalink

    Nice script – thank you. I am trying to implement into a mobile site and have images that are 600px x 300px. i can get it to work properly – but cannot seem to get it to be a width of 100% to scale to the browser width of whatever device is looking at the page. If I change the width to 100%, all 4 images that I created are visible. I want the max width to be 100% so if I test and scale the window, the image scales to be the full width of the window.

    Any suggestions would be great – thanks,
    Mike

    Reply
    • Gabriel
      Posted on January 24, 2012 at 17:13 Permalink

      Hi,

      I haven’t been able to figure out a fix for your problem, but I have had a similar problem with my Flash banner, http://www.flashxml.net/banner-rotator.html
      It wasn’t scaling correctly when I was zooming in and out in the browser. However the support staff at flashxml gave me a solution to make it scalable. If you are interested you can read this FAQ for their product , might be the solution you were looking for.

      Reply
  3. Amber
    Posted on December 15, 2011 at 03:09 Permalink

    Hi Malihu,

    First off I have to say how much I love your Slidebox. I think it is so awesome and I use it a lot.

    I am not having any issues with it not working or anything but what I am getting a JavaScript Error in my Error Console for Fire Fox with the following line of code:
    var leftPosition=$(‘#slidebox .container’).css(“left”).replace(“px”, “”);

    This is the Error:
    Error: $(‘#slidebox .container’).css(“left”) is undefined

    Can you possibly help me with what this error might be so I can fix it?

    Thank you in advance!

    ~ Amber

    Reply
  4. Perotin
    Posted on November 4, 2011 at 18:51 Permalink

    Hi! Your javascript codes are great. My question is: is it possible to change the rotation from right – left to left – right. Thank you!

    Reply
  5. Marcos Tavares
    Posted on November 2, 2011 at 03:46 Permalink

    sorry, javascript was disabled. The code is working perfectly.

    Reply
  6. Marcos Tavares
    Posted on November 2, 2011 at 00:13 Permalink

    Forgot to mention that in Firefox 7.1 on Windows XP works perfectly, but Windows 7 does not work.

    thank you

    Reply
  7. Marcos Tavares
    Posted on November 1, 2011 at 23:59 Permalink

    Hi, I’m using your script on my site, but does not work in Firefox 7.1. How would I do for work? Sorry my English.

    thank you

    Reply
  8. Diego
    Posted on November 1, 2011 at 21:16 Permalink

    Hi! This script is working really great, thanks for your work!

    I have a question that maybe you could help me out, I am trying to add images behind number of pages, but i just want to show images, so I added through css the images as background and delete text of html but pagination dissapear, how can I just show images?

    Thank you!!

    Reply
  9. Marcos Tavares
    Posted on November 1, 2011 at 01:26 Permalink

    hi, my name is Marcos Tavares and I’m from Brazil. I want to thank you for the outstanding contribution of your knowledge to us all. A hug from his Brazilian counterpart. Sorry my English.

    Reply
    • malihu
      Posted on November 14, 2011 at 12:36 Permalink

      Thanks Marcos, you’re very kind 🙂

      Reply
  10. Marcello Urdiales
    Posted on October 19, 2011 at 05:40 Permalink

    Thanks for sharing this nice code. I have already used it several times smoothly, but now, I am facing challenges/difficulties with a new project, which I used 13 slides with images embedded. They work normally if I keep it originally as below:

    #slidebox, #slidebox .content {
    width:600px;
    }
    #slidebox, #slidebox .container, #slidebox .content {
    height:300px;

    But, I need the slides to be 960x419px and when I change the code to reflect these values, it “skips”the last one and goes to the first slide and stops working properly. I have made a few changes to test it with text and with images and in both cases the issue persists. Do you have any suggestion how can I solve this issue or can you please help me by explaining how can I determine other size rather than what is originally in the code?
    Examples of what I have used for your reference (and that didnt work):

    #slidebox, #slidebox .content {
    width:960px;
    }
    #slidebox, #slidebox .container, #slidebox .content {
    height:419px;

    I really appreciate your help. Looking forward to hearing from you!

    Reply
  11. Manu T Raj
    Posted on October 18, 2011 at 07:44 Permalink

    thanks

    Reply
  12. Ajas nls
    Posted on October 13, 2011 at 10:50 Permalink

    how do we get it to just scroll to the right to the next slide instead of going backward ?

    Reply
  13. bizzpromo
    Posted on October 13, 2011 at 03:58 Permalink

    This may have been stated before in the messages, but is there a way to stop the scrolling at the last slide? I would like the slide to scroll through once then stop and the person viewing can then click on a slide number to see the other slides if they want to view again. Thanks! Great Slider by the way…I really enjoy working with it.

    Reply
  14. feathersdesigns.com
    Posted on October 11, 2011 at 14:53 Permalink

    Nice plugin!!!

    Reply
  15. Dusan
    Posted on September 29, 2011 at 03:11 Permalink

    Thx for code! It’s working, but it just stops sliding at hover. Now i need on mouse out (when I move cursor from content) to continue sliding. Thanks for this!

    Reply
    • malihu
      Posted on September 29, 2011 at 10:54 Permalink

      Doesn’t it? I should auto-play the slides when you hover out…

      Reply
  16. Dusan
    Posted on September 28, 2011 at 03:38 Permalink

    Forget about second question, I found my mistake, it was already in your plugin i just misspelled class name 😀
    I just need solution for pausing on mouse over.

    Reply
    • malihu
      Posted on September 29, 2011 at 01:19 Permalink

      Placing the following function inside document ready should do the trick:
      $("#slidebox .content").hover(function(){ clearInterval(autoPlayTimer); },function(){ clearInterval(autoPlayTimer); autoPlayTimer = setInterval( autoPlay, autoPlayTime); });

      Reply
  17. Dusan
    Posted on September 28, 2011 at 02:58 Permalink

    Hey! Nice plugin you have here! I have modified it and it works perfectly, but I have two questions:

    Is it possible to have slide paused on mouse over?
    Is there possibility to make thumb associated with slide different than others?

    Thanks, and again, great script!

    Reply
  18. Tracey Milnes
    Posted on September 21, 2011 at 16:55 Permalink

    Hi Malihu,

    I’ve just used slidebox to make a banner of 948 x 250px width, the banner is displaying fine under the header banner in IE and Chrome, but for some reason in Firefox goes of the page and displays to the right of the header banner. Any ideas?

    Kind regards
    Tracey

    Reply
    • krishh
      Posted on September 26, 2012 at 08:17 Permalink

      I am also having the same issue. When i try to use the slider in firefox it goes of the right side of the page 🙁
      Please hlep

      Reply
  19. rw
    Posted on September 20, 2011 at 13:51 Permalink

    How do I modify the number of images/thumbs from 4 to 2. What all in the code needs to be modified besides the html?

    Reply
    • malihu
      Posted on September 21, 2011 at 01:12 Permalink

      Nothing really… just the html 😉

      Reply
      • rw
        Posted on September 21, 2011 at 16:22 Permalink

        I’ve concluded my problems w the script are also IE related. I’m running versions 8.0.6001. I’m trying to run 3 slides, they loop fine in Chrome, but I’m getting the same issue where the last slide is blank. This continues even if I add the 1st slide to the last slot.

        Reply
  20. Jens
    Posted on September 14, 2011 at 01:45 Permalink

    I’m following your advice about how to create a “carousel loop” so that the first slide is shown directly after the last slide, without animating back to the beginning.

    “A quick and not so efficient way would be to clone the first slide and place it to the end (manually or with jquery) so when the last slide is reached the next button would create a carousel line effect (moving to cloned slide and immediately return to the same first one without any animation).”

    I’m no jQuery guru but I managed to clone the first slide using the following in the $(document).ready() function:

    $("#slidebox .content").first().clone().appendTo('#slidebox .container');

    This clones the slide fine, but I think what we’re really after is adding a reference to the first slide after the last, as the above code will only show the last slide and then animate to the beginning again.

    So, question is how do you append a reference to the first slide and will this create the desired effect of an endless carousel loop?

    Thanks!

    Reply
  21. Serjoga Stotskiy
    Posted on September 12, 2011 at 12:37 Permalink

    You know… this script is work but it’s a piece of SHIT! Global variables….

    leftPosition==-slideboxTotalContent
    WTF???

    Reply
    • malihu
      Posted on September 12, 2011 at 13:04 Permalink

      lol
      You mean the var naming? Cause leftPosition variable is not global as it’s defined in Slidebox function as var leftPosition prior to the condition you posted.

      Reply
  22. Matt Danis
    Posted on September 8, 2011 at 01:32 Permalink

    I’m having some trouble. The slideshow works fine with FF and Chrome, but with IE8:

    – The slideshow is positioned down and to the left.
    – Every other image is skipped. My images all have links, and they ALL work (even on the images that don’t appear.

    I can’t seam to fix it no matter what I do.

    Here is my webpage. http://www.matthewdanisphotography.com/

    Reply
  23. Bigaltheking
    Posted on August 19, 2011 at 19:30 Permalink

    Hi, awesome script. So easy to implement.

    FYI, i saw someone asked about hyperlinks, just add the link to your html.
    you can even build css maps if you want multiple links on one slide.

    I have a question tho, how do we get it to just scroll to the right to the next slide instead of going backward through them all?

    Thanks, bigaltheking

    Reply
    • malihu
      Posted on August 20, 2011 at 13:20 Permalink

      Hello,

      A quick and not so efficient way would be to clone the first slide and place it to the end (manually or with jquery) so when the last slide is reached the next button would create a carousel line effect (moving to cloned slide and immediately return to the same first one without any animation).

      For implementing a more appropriate way, the script would need to be modified completely cause you really need all the panels placed on top of each other rather than on the left as a single row. I’ve made a slideshow like this (only for images though), so when I get some time I’ll post it here.

      Reply
      • Peter
        Posted on February 14, 2012 at 15:23 Permalink

        Hi Malihu,
        Any update on this, i nkow a few people eager to see the result!

        Thanks
        Pete

        Reply
  24. Tracey Milnes
    Posted on August 12, 2011 at 13:08 Permalink

    Hi Malihu,

    I am new to this slidebox and to java in general, my question is how do I link my images to my website?

    Reply
    • malihu
      Posted on August 12, 2011 at 13:13 Permalink

      Hello,
      You simply place your images (or any other content) inside each .content div in the markup.

      Reply
      • Ravi
        Posted on March 4, 2012 at 00:34 Permalink

        Do you mean we should replace the content 1, content 2, content 3 etc with my images such as 123.jpg, 345.jpg etc ? I tried that but it does not seem to work.

        content 1

        content 2

        content 3

        content 4

        Reply
  25. Liz
    Posted on July 26, 2011 at 05:48 Permalink

    Thank you so very much for providing this script. Very easy to work with especially as its my first time using html, css, and javascript to make a website via dreamweaver. Truly appreciate you making this open for others to use. Sincere gratitude and thanks.

    Reply
  26. Dominik
    Posted on July 24, 2011 at 05:11 Permalink

    Hey, that plugin is great, but I’ve got problem under Opera 11.50 – http://unifire.biuro.evillage.pl/node/3 .
    Navigation buttons just link to top of the page, and slider is not working.
    Do You have any ideas, what to do about this?

    Reply
  27. Fabio
    Posted on July 15, 2011 at 12:24 Permalink

    Ok malihu,

    I’ll wait, and I know it well be a great job again!

    Thanks.

    Reply
  28. Fabio
    Posted on July 12, 2011 at 12:26 Permalink

    Great job!

    Is it possible to have different effect like a simple “fade”?

    Reply
    • andrea
      Posted on July 13, 2011 at 14:55 Permalink

      light, simple and functional!

      very great work 🙂

      Reply
    • malihu
      Posted on July 14, 2011 at 15:15 Permalink

      Hi Fabio,

      This is a very simple script so it doesn’t offer multiple transitions. I’ve made a much more advanced that I’ll put online as soon as possible.

      Reply
  29. Marc Segel
    Posted on June 18, 2011 at 19:31 Permalink

    This is the perfect solution for making smart phone friendly slideshows. Took me a long time to find it but thank you for the source code.

    Reply
  30. Willie
    Posted on June 16, 2011 at 16:13 Permalink

    Nice plugin! Support!!! =)

    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