Responsive & Touch-Enabled jQuery Slider Plugin - Simple Slider

Responsive & Touch-Enabled jQuery Slider Plugin - Simple Slider
File Size: 1.97 MB
Views Total: 5854
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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


  • 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=""></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 class="slide">
<div class="slidecontent">
Content 2



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 {
background: white;

6. Call the plugin with options.

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


7. Methods.

  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").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:


  • Fixed Touchmove not working on Android icm Galaxy phones


  • Fixed some problems with transition 'fade'


  • Give every slider a unique ID


  • Added Grunt, validated core, created minified files


  • add manual swipe and reset method


  • update.


  • demo update.


  • demo update.


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