Slider (jQuery Plugin)

Version and development

Dependencies

: jQuery 1.3.2 or higher

Latest Version

: 0.2b

Browser Support

Tested with the browsers below:

• Mac OS X
  • Firefox 3.x, 4.x … 10.x
  • Chrome 7.x
  • Opera 10.63
  • Camino 2.1.x
  • Safari 5.x
• Windows
  • No tests have been made as I don’t have any Windows installation.

Download

Github

: jQuery Slider Plugin on Github

All versions

: Check current or old versions

Demo

An constituted slider gonna be look like below;

You can find this demo’s code in below

Html

<div id="sliderContainer">
    <ul class="sliderItems">
        <li>
            <img alt="Turkey" src="/assets/slider/img/turkey.jpg" />
        </li>
        <li>
            <img alt="Going to base camp" src="/assets/slider/img/going_to_base_camp.jpg" />
        </li>
        <li>
            <img alt="Climbing" src="/assets/slider/img/climbing.jpg" />
        </li>
        <li>
            <img alt="Mountain" src="/assets/slider/img/mountain.jpg" />
        </li>
        <li>
            <img alt="Walking" src="/assets/slider/img/walking.jpg" />
        </li>
    </ul>
</div>

Javascript

$(function(){
    $('#sliderContainer').slider();
});

How to Use

1. Include files

Extract it after download slider.tar.gz file or checkout github repository. After that include jQuery, slider.js and slider.css files in your code

<link rel="stylesheet" type="text/css" src="min/slider.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="min/slider.js"></script>

2. Prepare HTML part

You have to write a few lines of html that the slider plugin gonna turn them as sliding content. It is possible to make sliding different contents, not just images. Just be sure you did not crash important parts. For example the class of the unordered list (<ul class="sliderItems">) and the id of container div (<div id="sliderContainer">) into the html part is important. You shouldn’t change it, but you able to add another feature like adding class or data attribute. Another important part is the list items. Place your each content of sliders per a list (<li>).

<div id="sliderContainer">
    <ul class="sliderItems">
        <li>
            <img alt="my image" src="/img/myimage.jpg" />
        </li>
        <li>
            <img alt="my other image" src="/img/myotherimage.jpg" />
        </li>
        <li>
            <img alt="other slider image" src="/img/slidethisimagetoo.jpg" />
        </li>
    </ul>
</div>

As I said before you able to use like the below;

<div id="sliderContainer">
    <ul class="sliderItems">
        <li>
            <a title="link to my image" href="img/myimage.jpg">
                <img alt="my image" src="/img/myimage.jpg" />
            </a>
        </li>
        <li>
            <a title="link to my other image" href="img/myotherimage.jpg">
                <img alt="my other image" src="/img/myotherimage.jpg" />
            </a>
        </li>
        <li>
            <a title="link to my other slider image" href="img/slidethisimagetoo.jpg">
                <img alt="other slider image" src="/img/slidethisimagetoo.jpg" />
            </a>
        </li>
    </ul>
</div>

3. Edit CSS file if necessary

Firstly please make sure width of your content of sliding elements. They must have same width. I make the slider as 500px x 333px. You able to change them. Here how you do this;

A. Overwrite – Recommended

Just overwrite the css property like that;

<style type="text/css"> 
#sliderContainer {
    width:800px;
    height:400px;
}
</style>

In this way you can update your plugin without fair!

B. Edit minified

Open the minified version and just change the sliderContainer’s width and height as you wish. But you must do this again after each update.

C. Edit Source

Just don’t do that ;)

4. Initialize the plugin without custom option

Write just a line code inside the document.ready function.

$(function(){                         // Start when document ready
    $('#sliderContainer').slider();   // Call the slider plugin
}); 

5. Customizable options

Firstly lets take a look the options before explain each of them one by one.

{
    method: 'circle',       // type flat or circle
    auto: true,             // if you type true it gonna start automatically when document ready
    showControls: true      // type true or false
    wait: 4000,             // wait before next item
    duration: 100,          // sliding duration
}

method:

It’s been set up as ‘cricle’ by default. Change it to ‘flat’ that it gonna turn to scratch by sliding to back.

auto:

It’ll start sliding after you triggered start event like that $('#sliderContainer').trigger('start');. Please keep reading for more information about other events.

showControls:

Actually that’s aren’t controls, it shows the white circle’s on the right-bottom place. In next versions the white circles become control buttons.

wait:

How many seconds a slide have to be seen? 6? Then just give 6000 and slider gonna shows each item for six seconds.

duration:

Give the effect duration.

6. Enjoy with events

The nice part of this plugin. You able to manage your plugin by helping event triggers and spesific buttons. Just place a button where you want on your page and bind a function like the below;

$(function(){
    $('#myStopButton').click(function(e){
        e.stopPropagation();
        $('#sliderContainer').trigger('stop');
    });
});

Click this button to stop slider. Please check other events below;

stop event:

$('#sliderContainer').trigger('stop');

start event:

$('#sliderContainer').trigger('start');

next event:

$('#sliderContainer').trigger('next');

Change Logs

0.2b

• Readme and example added
• Some variables name changed
• Builder script added
• Performance improvements
• Using DataURI instead of png file
• Fixed couple of bugs.

0.1b

• Plugin released.