Responsive & Touch-Enabled jQuery Slider Plugin - Simple Slider

Simple Slider is another jQuery slider plugin that provides a simple way to create a responsive & mobile-friendly slider with configurable CSS3 transitions.

Features:

• Amazing CSS3 transitions and transforms with jQuery transit plugin.
• Touch swipe navigation with jQuery touchSwipe plugin.
• Mouse drag, finger, and bullets navigation.
• Configurable aniamtion speed and interval.

How to use it:

1. Include the jQuery javascript library from google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include jQuery simple slider's script file in the page.

<script type="text/javascript" src="simpleSlider.min.js"></script>

3. Include the latest jQuery touchSwipe and transition plugins in the page.(Optional)

<script type="text/javascript" src="transit.js"></script>
<script type="text/javascript" src="touchSwipe.js"></script>

4. Include the latest jQuery touchSwipe and transition plugins in the page.(Optional)

<div class="slider">

<div class="slide">
<div class="slidecontent">
Content 1
</div>
</div>

<div class="slide">
<div class="slidecontent">
Content 2
</div>
</div>

...

</div>

5. Style the slider via CSS.

.slider {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.slider .slide {
width: 100%;
height: 100%;
top: 0;
left: 0;
float: left;
position: absolute;
}
.slider .slide .slidecontent {
position: absolute;
top: 50%;
width: 1000px;
padding: 0 100px;
margin-top: -125px;
}
.slider #slideposition {
position: absolute;
bottom: 50px;
left: 50%;
}
.slider #slideposition ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.slider #slideposition ul li.indicator {
display: inline-block;
height: 10px;
width: 10px;
background: #222;
margin: 0px 7px;
padding: 0;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
overflow: hidden;
cursor: pointer;
}
.slider #slideposition ul li.indicator.active {
background: white;
}

6. Call the plugin with options.

$(document).ready(function(){
var options = {

// The name of a slide in the slidesContainer
slides: '.slide', 

// Add possibility to Swipe
swipe: true,    

// Add 'magnetic' swiping. 
// When the user swipes over the screen the slides will attach to the mouse's position
magneticSwipe: true, 

// Accepts "slide" and "fade" for a slide or fade transition
transition: "slide", 

// Add a UL with list items to track the current slide
slideTracker: true, 

// The name of the UL that tracks the slides
slideTrackerID: 'slideposition', 

// Slide on interval
slideOnInterval: true, 

// Interval to slide on if slideOnInterval is enabled
interval: 5000, 

// Duration of an animation
animateDuration: 1500, 

// 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
animationEasing: 'easeInOut', 

// Pause when user hovers the slide container
pauseOnHover: false, 

// Add default CSS for positioning the slides
useDefaultCSS: false,

// Create a 'neverending/repeating' slider effect.
neverEnding: true 

};

var slider = new simpleSlider(options);
slider.init();

});

7. Methods.

$(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
});

8. Events

$(".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
});

Change logs:

2015-07-16

• Fixed Touchmove not working on Android icm Galaxy phones

2015-05-04

• Fixed some problems with transition 'fade'

2015-03-23

• Give every slider a unique ID

2015-02-02

• Added Grunt, validated core, created minified files

2015-02-01

• add manual swipe and reset method

2014-11-21

• update.

2014-10-30

• demo update.

2014-10-02

• demo update.

2014-10-01

• Add transitionend

v2.3.2 (2014-01-10)

• Add transitionend
• Demo update

---

This awesome jQuery plugin is developed by dirkgroenen. For more Advanced Usages, please check the demo page or visit the official website.