Easy Unobtrusive Slider / Carousel Plugin With jQuery - luckyslider

A simple, unobtrusive jQuery slider plugin for generating a basic, cross-browser image carousel/slider with optional navigation, pagination, autoplay and infinite loop support.

How to use it:

1. Put the required CSS file luckyslider.css in the document's head section:

<link rel="stylesheet" href="luckyslider.css">

2. Add a set of images to the slider.

<div class="mySlider">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  ...
</div>

3. Put jQuery library and the JavaScript file luckyslider.js at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="luckyslider.js"></script>

4. Initialize the lucky slider with default options.

$('.mySlider').luckySlider();

5. Default plugin settings.

$('.mySlider').luckySlider({

  // start image
  start: 1,

  // shows navigation arrows
  nav: true,

  // shows pagination bullets
  dots: true,

  // infinite loop
  cycle: true,

  // enable jQuery touch events
  swipe: true,

  // autoplay
  auto: false,

  // timeout for autoplay
  timeout: 3000
  
});

6. API methods.

var mySlider = $('.mySlider').luckySlider();

// back to previous image
mySlider.prev()

// goto next image
mySlider.next()

// return the currently active image
mySlider.getActive() 

// set the active image
mySlider.setActive(number)

---

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