sSlider: a lightweight jQuery plugin

Download sSlider.zip (26,8kB)
Caption
Write some text here
Text
Beautiful landscape
Birds

Features

sSlider is a lightweight jQuery slider toolkit. View source code on github.

HowTo - Step by step

  1. Download the minified package, extract and place it into your project directory

    The package contain css styles, images and the minified version of sSlider

  2. Link files :: in the <head> tag of your document

    <head>
    ...
    <link rel="stylesheet" href="path/to/sSlider/css/jQuery.sSlider.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="path/to/sSlider/jQuery.sSlider.min.js"></script>
    ...
</head>

  3. Markup HTML :: in the <body> tag of your document

    <body>
    ...
    <div id="mySlider" class="sSlider">
        <div><img src="path/to/image/new-york.jpg" /><span>New York</span></div>
        <div><img src="path/to/image/paris.jpg" /></div>
        <div><img src="path/to/image/cars.jpg" /><span>My new car</span></div>
        <div><img src="path/to/image/landscape.jpg" /></div>
    </div>
    ...
</body>

  4. Usage

    Simple usage :: inside a <script> tag

    <script>
    $(document).ready(function(){
        $('#mySlider').sSlider();
    });
</script>

    More options

    Option name Default Accepted values Example
    'animationType' 'fade' 'fade'
    'no-effect'
    'slideH'
    'slideV'
    'random'    		 
    $('#selector').sSlide({ 'animationType': 'slide' })
    'autoslide' true true
    false    		 
    $('#selector').sSlide({ 'autoslide': false })
    'fixedSize' false false
    { 'width': 'XXXpx/%', 'height': 'YYYpx/%' }    		 
    $('#selector').sSlide({ 'fixedSize': { 'width': '500px', 'height': '40%' } })
    'nav' true true
    false    		 
    $('#selector').sSlide({ 'nav': false })
    'progressBar' true true
    false    		 
    $('#selector').sSlide({ 'progressBar': false })
    'responsive' true true
    false    		 
    $('#selector').sSlide({ 'responsive': false })
    'speed' 7000 int 
    $('#selector').sSlide({ 'speed': 12000 })

    Example: slider 1000x400 without nav, speed 4sec and vertical slide animation

    <script>
    $(document).ready(function(){
        $('#selector').sSlide({
            'animationType': 'slideV',
            'fixedSize': {
                'width': '1000px',
                'height': '400px'
            },
            'nav': false,
            'speed': 4000
        });
    ...
    });
</script>