Simple jQuery/CSS3 slider

A simple slider that does what a simple slider has to do: slide slides! The slider has been developed with the idea to provide a slider that can be used in all your projects. It provides you with the basic features you need from a slider.

Installation

Include jQuery, jquery.slimpleslider.min.js and transit.js (or download the jquery.simpleslider.package.min.js which includes transit.js) in your head. The slider will automatically change transit's useTransitionEnd property to true. You can disable this by setting updateTransit: false in your options.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="jquery.simpleslider.package.min.js"></script>

Add a div to your site containing the slides. The standard name for these divs are .slider and .slide, but these can be changed in the options object.

<div class='slider'>
    <div class='slide'>
        <div class='slidecontent'>
            <h1>Solar Dolar Wolar Woot</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leoing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2>
        </div>
    </div>
    <div class='slide' >
        <div class='slidecontent'>
            <h1>Solar Dolar Wolar Woot</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2>
        </div>
    </div>
</div>

After creating the HTML you have to add some css (or enable the useDefaultCSS option which will automatically add the correct styling). This can be as short and simple as:

.slider{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.slide{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    float: left;
    position: absolute;
}

Create the slider

$(document).ready(function(){
    $(".slider").simpleSlider();
});

Custom options

You can also control the options of the simpleSlider. Just parse an object with the options into the simpleSlider().

$(document).ready(function(){
    // Default options
    var options = {
        slides: '.slide', // The name of a slide in the slidesContainer
        swipe: true,    // Add possibility to Swipe
        magneticSwipe: true, // Add 'magnetic' swiping. When the user swipes over the screen the slides will attach to the mouse's position
        transition: "slide", // Accepts "slide" and "fade" for a slide or fade transition
        slideTracker: true, // Add a UL with list items to track the current slide
        slideTrackerID: 'slideposition', // The name of the UL that tracks the slides
        slideOnInterval: true, // Slide on interval
        interval: 5000, // Interval to slide on if slideOnInterval is enabled
        animateDuration: 1500, // Duration of an animation
        animationEasing: 'easeInOut', // Accepts: linear ease in out in-out snap easeOutCubic easeInOutCubic easeInCirc easeOutCirc easeInOutCirc easeInExpo easeOutExpo easeInOutExpo easeInQuad easeOutQuad easeInOutQuad easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInBack easeOutBack easeInOutBack
        pauseOnHover: false, // Pause when user hovers the slide container
        useDefaultCSS: false, // Add default CSS for positioning the slides
        neverEnding: true // Create a 'neverending/repeating' slider effect.
    };

    $(".slider").simpleSlider(options);
});

Control the slider

You have to get the data from the dom element if you want to control the slider. The following code shows you how to do that

$(document).ready(function(){
    $(".slider").simpleSlider();
    var slider = $(".slider").data("simpleslider");

    slider.nextSlide(); // Go to the next slide
    slider.prevSlide(); // Go to the previous slide
    slider.nextSlide(slidenumber); // Go to the given slide
});

If enabled the slider automatically creates a list with list-items that you can use to control the slider.

Events

SimpleSlider will trigger a init, beforeSliding and afterSliding event. You can bind on these using the following code:

    $(".slider").on("init", function(event){
        // event.totalSlides: total number of slides
    });
    // It's important to bind the init event before initializing simpleSlider!

    $(".slider").simpleSlider();

    $(".slider").on("beforeSliding", function(event){
        // event.prevSlide: previous slide ID
        // event.newSlide: coming slide ID
    });

    $(".slider").on("afterSliding", function(event){
        // event.prevSlide: previous slide ID
        // event.newSlide: coming slide ID
    });

The afterSliding is triggered after the animation completed.

You can also call event.preventDefault(); in the beforeSliding event to prevent the slider from sliding to the next/previous slide.

Examples

Simple-jQuery-Slider is used in the following websites. You can check them out if you want to see the slider in action!

Demo site #1

Have you used the slider in one of your projects? Please let me know so I can add the link in this README.

Supported browser

SimpleSlider has been tested in Chrome, Firefox, Safari and Internet Explorer 7+.