RENDR

Twitter

Have an idea for an online application that would make people's lives much easier? Let us know! http://bit.ly/zDLR6 2009-11-01

SimpleSlider

Sum­mary

The Sim­pleSlider plu­gin was devel­oped out of the shear need for a slider that is more intu­itive to the CSS that is being applied to it. In a project I had for a client, not many other slid­ers were adapt­ing well with the styling that I needed to apply to it.

Note

If some­body wants to take a look at the code, and tell me why it can’t be pos­si­ble to run two instances on one page, I’d very much appre­ci­ate, and inte­grate a fix into the code. Thanks!

Down­load

Sim­pleSlider 477

Demos

Basic — No CSS, no settings

w/CSS — Some CSS, no settings

w/CSS+settings — Some CSS, some settings

Doc­u­men­ta­tion

Base

For the basic imple­men­ta­tion, cre­ate an ele­ment (ie. UL or DIV), and child ele­ments (ie. LI or DIV).

1
2
3
4
5
<ul id=“slider”>
    <li>Frame 1</li>
    <li>Frame 2</li>
    <li>Frame 3</li>
</ul>

or

1
2
3
4
5
<div id=“slider”>
    <div>Frame 1</div>
    <div>Frame 2</div>
    <div>Frame 3</div>
</div>

Imple­men­ta­tion

To add the Sim­pleSlider, all you need to ini­tially do is add the fol­low­ing code within some SCRIPT tags in the header or body (in addi­tion to hav­ing the jQuery library already inserted into the doc­u­ment). There is really only a cou­ple of things that are required for the Sim­pleSlider to work. The first is that you have a par­ent ele­ment with chil­dren ele­ments (review above). The sec­ond is that the par­ent ele­ment has a unique ID attribute.

1
2
3
4
5
6
7
<script type=“text/javascript”>
// <![CDATA[
    $(func­tion() {
        $(’#slider’).sim­pleslider();
    });
// ]]>
</script>

Set­tings

If you wanted to add some set­tings to fur­ther cus­tomize your Sim­pleSlider, fol­low­ing are the set­tings, their defaults, as well as a brief explanation.

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type=“text/javascript”>
// <![CDATA[
    $(func­tion() {
        $(’#slider’).sim­pleslider({
            auto: false,
            inter­val: 2000,
            speed: 500,
            direc­tion: ‘hor­i­zon­tal’,
            but­tons: true
        });
    });
// ]]>
</script>

Auto: If set to TRUE, the slider will auto-advance, using the Inter­val setting.

Inter­val: The time in mil­lisec­onds between each ani­ma­tion, if Auto is set to TRUE.

Speed: The time in mil­lisec­onds the ani­ma­tion between slides takes.

Direc­tion: If set to Hor­i­zon­tal, slider will slide from left to right. If set to Ver­ti­cal the slider will move up and down.

But­tons: If set to FALSE, no but­tons will dis­play. If so, it is then recomended that Auto is set to TRUE.

Auto­But­ton­Height: If set to TRUE, but­tons will auto­mat­i­cally take heighth of the slider using inline CSS.

CSS

There are a few changes to the DOM that Sim­pleSlider makes. It cre­ates a nam­ing con­ven­tion based on the ID of the par­ent (main) ele­ment. To mod­ify the CSS, there are a few hooks that will make cod­ing much eas­ier. The fol­low­ing code assumes that you gave the par­ent ele­ment an ID of “slider”.

1
2
3
4
5
 #slider-wrapper { (none that I can think of) }
 #slider { back­ground, width|height }
 #slider .frame { back­ground, padding }
 input#slider-previous_button { any }
 input#slider-next_button { any }

Donate

If you’ve felt this project has ben­e­fit­ted you, you might con­sid­er­ing donat­ing. Every cent is very much appreciated!


  • 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.
  • 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!
  • Bowman
    No easing, no continuous loop, no thanks ^_^
  • Those are great things that should definitely be included. I'll put that on my list of features to add.

    Thanks!
  • tri
    Adding a var declaration should allow multiple instances

    $(this).each(function() {
    var $container, $frame, $wrapper, frameCount, frameNumber;
    ...
  • I'll have to try that.

    Thanks!
blog comments powered by Disqus