Simple jQuery slider

Download   Demo

A simple slider that does what a simple slider has to do: slide slides!

Simple to use and supports every browser! (IE7+)

1. INCLUDE JS FILES

<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="transit.js"></script>
<script type="text/javascript" src="jquery.simpleslider.js"></script>

2. HTML

<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>

3. CSS

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

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

4. JAVASCRIPT

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

5. 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
    };

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

5. 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.

6. 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.