Simple Flexible Content Carousel Plugin with jQuery

A simple, lightweight, responsive, flexible jQuery content slider (carousel) plugin that features autoplay, endless loop, arrows & bullets navigation, event callbacks and much more.

Basic usage:

1. Load the Simple jQuery Slider plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="simple-jquery-slider.min.js"></script>

2. Wrap your slide content (e.g. images) into a DIV container.

<div id="slide">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
  <img src="4.jpg" alt="">
</div>

3. Create a set of links that links to specific slides (Optional).

<div class="links">
  <a href="#slide-0">Slide 1</a>
  <a href="#slide-1">Slide 2</a>
  <a href="#slide-2">Slide 3</a>
  <a href="#slide-3">Slide 4</a>
</div>

4. Initialize the plugin to create a basic image carousel.

$('#slide').simpleSlide();

5. Lots of options & callback events to customize your content slider.

'page':0,

// auto play
'auto':false,

// The time between slides in an automated slideshow
'autoTime':4000,

// Continue auto after interaction?
'autoInteraction':false, 

'interval':false,

// arrows navigation
'arrows':true,

// bullets navigation
'bullets':false,

// The amount of time it takes to transition between slides
'transitionTime':500,

// Determines if the slideshow should listen to 'hashchange' event.
'hashChange':true,

// Selector string for slide elements
'slideSelector':'.slide',

'count':0,
'container':$(this),

//Callbacks
'onInitiate':function(){},
'onBeforeSlide':function(){},
'onAfterSlide':function(){},
'onSlideStart':function(){},
'onBulletClick':function(){},
'onArrowClick':function(){},
'onPreviousClick':function(){},
'onNextClick':function(){}

---

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