#slider simple

New Post has been published on http://www.htmluse.com/simple-jquery-slider/

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