Responsive Lightweight Image Slider Plugin For jQuery

A lightweight, full-free jQuery plugin used to create a responsive, touch-enabled (requires hammer.js), cross-fading or infinitely sliding image slider/carousel for both desktop and mobile webpages.

How to use it:

1. Import the necessary JavaScript and CSS files into the webpage.

<!-- Stylesheet -->
<link rel="stylesheet" href="free-simple-slider.css">
<!-- JavaScript -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="free-simple-slider.js"></script>

2. Import the OPTIONAL hammer.js library for touch gestures support.

<script src="/path/to/hammer.min.js"></script>

3. Create a list of images to be presented in the slider.

<ul id="slider-demo" class="slider-list">
  <li class="current"><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
  ...
</ul>

4. Initialize the plugin to generate a default slider.

$('#slider-demo').freeSimpleSlider();

5. Enable/disable the slider controls.

$('#slider-demo').freeSimpleSlider({
  dots: false, // pagination bullets
  arrows: true, // navigation arrows
});

6. Config the animation when transitioning between images.

$('#slider-demo').freeSimpleSlider({
  time: 5000, // in ms
  animation: "fade" // or "slide", "basic"
});

---

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