Responsive Auto Carousel Plugin With jQuery - My-Slider

A responsive jQuery carousel slideshow plugin which has the ability to fade automatically through a set of HTML elements with progress bar and navigation support.

How to use it:

1. Load the required CSS my-slider.css to style the plugin.

<link href="my-slider.css" rel="stylesheet">

2. The plugin allows you to embed any html content into the carousel. The html structure should be like this:

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

3. Place both jQuery library and the JavaScript file my-slider.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="dist/js/my-slider.js"></script>

4. General configs of the plugin.

$('.slider').slider({

  // autoplay
  'autoPlay': true,

  // shows navigation controls
  'controls': true,

  // shows progress bar
  'topBar': true,

  // autoplay interval
  'interval': '4000',
  
  // custom template
  'prevControlTemplate': '<a class="slider-control" id="slider-prev" href="javascript:void(0)"><span>Prev</span></a>',
  'nextControlTemplate': '<a class="slider-control" id="slider-next" href="javascript:void(0)"><span>Next</span></a>',
  'topBarTemplate': '<div id="slider-top-bar" role="bar"><span></span></div>'
  
});

---

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