Flexible Responsive jQuery Image Slider Plugin - Simple Slider

A fully responsive, flexible and easy to use jQuery image carousel slider plugin that features endless loop, auto rotation, arrows navigation, dots pagination and CSS3 animations.

How to use it:

1. Include the slider.css in the document for slider core styles.

<link rel="stylesheet" href="css/slider.css">

2. Insert your images with captions into a slider container as follows.

<div class="slider-container" id="demo">

  <!-- Slider  -->
  <div class="slider">
  	<div>
      <img src="images/1.jpg" alt="">
    <span class="caption">Image Caption 1</span>
  	</div>
  	<div>
      <img src="images/2.jpg" alt="">
    <span class="caption">Image Caption 2</span>
  	</div>
  	<div>
      <img src="images/3.jpg" alt="">
    <span class="caption">Image Caption 3</span>
  	</div>
  </div>
  
  <!-- Controls -->
  <div class="switch" id="prev"><span></span></div>
  <div class="switch" id="next"><span></span></div>

</div>

3. Include jQuery Javascript library the slider.js at the bottom of the web page.

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

4. Call the plugin on the slider container and enable the image caption display.

$("#demo").sliderUi({

// Options
caption: true

});

5. All the default options.

$("#demo").sliderUi({

// Auto play when page loads
autoPlay: true,

// animation delay in ms
delay: 3000,

// display controls
controlShow: true,

// display arrows navigation
arrowsShow: true,

// display image captions
caption: false,

// animation speed
speed: 300,

// CSS3 easing effects
cssEasing: "ease-out"

});

Change logs:

2017-07-03

• Using throttle instead of debounce

2017-06-26

• Fixed autoswitch with disabled option autoPlay after resizing window

2016-10-21

• JS & CSS update

2015-12-05

• minor fixes

2015-03-18

• Slider.js minor fixes

2015-03-02

• Slider.js minor fixes

2014-11-16

• update.

---

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