Slider

Summary

The Slider plugin was developed out of the shear need for a slider that is more intuitive to the CSS that is being applied to it. In a project I had for a client, not many other sliders were adapting well with the styling that I needed to apply to it.

Download

jQuery Slider Plugin (3185)

Demo

Launch Demo

Documentation

Base

For the basic implementation, create an element (ie. UL or DIV), and child elements (ie. LI or DIV). NOTE: In the demos there are wrapper DIVs that are only used to style each slider separately.

1
2
3
4
5
<ul>
    <li>Frame 1</li>
    <li>Frame 2</li>
    <li>Frame 3</li>
</ul>

or

1
2
3
4
5
<div>
    <div>Frame 1</div>
    <div>Frame 2</div>
    <div>Frame 3</div>
</div>

or even

1
2
3
4
5
<div>
    <img alt="" />
    <img alt="" />
    <img alt="" />
</div>

Implementation

To add a Slider very few lines of code are actually need. Load the jQuery library, be sure to have a simple parent > children structure, and apply the plug-in as follows:

1
2
3
$(function() {
    $('ul').slider();
});

Settings

If you wanted to add some settings to further customize your Slider, following are the settings, their defaults, as well as a brief explanation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
    $('ul').slider({
        transition : 'slide',
        easing : 'swing',
        direction : 'horizontal',
        speed : 500,
        auto : false,
        interval : 2000,
        hoverPause : true,
        navigation : true,
        buttons : true,
        prevText  : 'Previous',
        nextText : 'Next',
        loop  : true
    });
});

Transition: You can choose to have it ‘slide‘, ‘fade‘ or just ‘cut‘ between slides. Defaults to ‘slide‘.

Easing: Whether you want to use jQuery’s ‘swing‘ or ‘linear‘, or you can add other easing options available with the Easing plugin. Defaults to ‘swing‘.

Direction: Allows you to choose between sliding the panes in a ‘horizontal‘ or ‘vertical‘ fashion. Defaults to ‘horizontal‘.

Speed: The duration of the transition (in milliseconds).  Defaults to 500.

Auto: If set to TRUE, the slider will auto-advance. Defaults to FALSE.

Interval: The time in milliseconds between each animation, if Auto is set to TRUE.

Hover Pause: When the auto-advance is on, hovering will cause auto-advance to pause until the mouse is no longer hovering.  Defaults to TRUE.

Navigation: Creates a navigation list for the slider. By default, each ‘tab’ has the frame number in which it will transition to on click. If a frame has a title, that will also be appended to the number (there are some CSS hooks to better style these. If set to FALSE, no navigation will display. Defaults to TRUE.

Buttons: If set to FALSE, no buttons will display. If so, it is then recomended that Auto is set to TRUE. Defaults to TRUE.

Prev Text: Change the text on the Previous button.  Defaults to ‘Previous‘.

Next Text: Change the text on the Next button.  Defaults to ‘Next‘.

Loop: If set to true, a transition to the next slide while being on the last slide will trigger going back to the beginning, and vice-versa.  Defaults to TRUE.

CSS

There are a few changes to the DOM that Slider makes. It uses a very basic naming convention. To modify the CSS, there are a few hooks that will make coding much easier (the classes in parenthesis are conditional).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.slider-wrapper

.slider-control-prev(.disabled)

.slider-control-next(.disabled)

.slider-control-navigation

.slider-control-navigation-tab(.current)

.slider-boundary

.slider-container

.slider-slide

Donate

If you’ve felt this project has benefitted you, you might considering donating. Every cent is very much appreciated!


  • tri

    Adding a var declaration should allow multiple instances

    $(this).each(function() {
    var $container, $frame, $wrapper, frameCount, frameNumber;
    …

  • http://jstnjns.com/ JSTNJNS

    I'll have to try that.

    Thanks!

  • http://jstnjns.com/ JSTNJNS

    Those are great things that should definitely be included. I'll put that on my list of features to add.

    Thanks!

  • Bowman

    No easing, no continuous loop, no thanks ^_^

  • Ish

    I'm new to Javascript, a real noob. I find it hard to get this working.
    A downloadable zip file with html, js and css files wud be much better. For all the noobies :)

    This is exactly what I was looking for by the way. Thanks.

  • http://jstnjns JSTNJNS

    Right on. I'll put this on the good ol' to-do list. Thanks!

    Also, if there is any functionality you feel is lacking, go ahead and just let me know. However, keep in mind that I am trying to keep this light and 'simple' :)

    Thanks!

  • http://jstnjns JSTNJNS

    Right on. I'll put this on the good ol' to-do list. Thanks!Also, if there is any functionality you feel is lacking, go ahead and just let me know. However, keep in mind that I am trying to keep this light and 'simple' :) Thanks!

  • Jörg

    What does _continuous_? This is set to “false”?!

  • Jörg

    It can be pos­si­ble to run two instances on one page?

  • http://www.kick-image.at/weblog/27-04-2010/jquery-plugin-simple-slider jQuery Plugin ‘Simple Slider’ – Weblog – Webdesign- Agentur kick-image.at – High End Webdesign – Linz, Austria, Europe

    [...] Auch technisch gesehen sind viele unterschiedliche Anwendungen zu finden, eine sehr empfehlenswerte ist diese: SimpleSlider – A simple, semantic and CSS driven slider (www.madebyrendr.com…simpleslider). [...]

  • http://www.jstnjns.com/ Justin

    You can run as many instances on a page as you have need for.

  • http://www.raghibsuleman.com/ Raghib Suleman

    A NICE WORK THANKS FOR DOWNLOADING…
    http://www.raghibsuleman.com/

  • Aaron-healey

    Hi Justin,

    On your Demo and when i added it to my site the Slider 4 doesnt Work in Google Chrome? any ideas why this is please?

  • Aaron-healey

    Its ok i fixed it i had to edit the jquery.simpleslider.js file so the frame width, frame height and boundary width and boundary height matched my Images

  • Allanb

    Hi, I just added this to my site, but for some reason in IE the images are stretched? please help?

  • http://www.jstnjns.com/ JSTNJNS

    Could you send me a link?

  • Allanb

     hey sorry for the late reply, super noob at webdev, i’ve been trying several img sliders lately and they all seem to have the same problem in IE, the first image shows up correctly sized, but as soon as it animates the following slides are all stretched out. I’m running these sliders in magento so it took me a while to learn there’s a conflict error between prototype and jquery, anywho, the problem still persists, here’s a site example.. http://farsightedirondoors.com thanks! any feedback would be helpful, and thank you for providing the community with such a great slider!

  • http://dini.hu/blog/wordpress/featured-content-gliderslider/ Featured Content Glider/Slider | Csak magamnak

    [...] Simple Slider http://jstnjns.com/jquery/simpleslider/ [...]

  • Hesam

    nice  job thanks
    but how we can add the url to the images for onclick? (in #slider-4 div)

  • http://www.jstnjns.com/ JSTNJNS

    Wrap the image in a standard link:

  • http://pulse.yahoo.com/_7NDKVC2YRR3CPM4G6WZHKWLHWY Ackryl

    Love how simple and configurable this is!

  • Kim

    the image slider can’t work in Google Chrome