Minimal Image Carousel Slider with jQuery - sdslider

sdslider is a very small and cross browser jQuery plugin for sliding / looping automatically or manually through a list of images with arrows navigation based on Font Awesome 4.

How to use it:

1. Include the required jquery.sdSlider.css for basic styles and Font Awesome 4 for navigation arrows.

<link rel="stylesheet" href="font-awesome.min.css">
<link href="jquery.sdSlider.css" rel="stylesheet">

2. Create a list of images on your web page.

<ul id="slider">
  <li><img src="1.jpg" alt="slider_1"/></li>
  <li><img src="2.jpg" alt="slider_2"/></li>
  <li><img src="3.jpg" alt="slider_3"/></li>
  ...
</ul>

3. Include jQuery library and the jQuery sdslider plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.sdSlider.js"></script>

4. The JavaScript to generate a carousel sliding from the image list.

$('#slider').sdSlider();

5. Options and defaults.

$('#slider').sdSlider({

// autoplay
autoStart: {
  active: false, // true or false
  delay: 1000 // autoplay interval
},

// image border
border: {
  color: '#000',
  width: 0
},

// displays slider controls
controls: true,

// displays navigation arrows
arrows: true,

// animation duration
duration: 1000

});

---

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