Minimal Responsive Image Carousel Plugin With jQuery - SimpleSlider

A simple, lightweight, responsive, touch-enabled jQuery image slider/carousel plugin that has the ability to auto resize/crop/center the images on window resize.

More features:

• Autoplay at a certain interval.
• Navigation arrows and pagination bullets.
• 3 built-in transition effects: basic, fade and slide.
• Supports touch gesture events. Requires hammer.js.

How to use it:

1. Load the latest version of jQuery library (slim build) and together with the plugin's JavaScript and CSS files in your html document.

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

2. Load the OPTIONAL hammer.js library.

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

3. Insert a list of images into the webpage.

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

4. The JavaScript to generate a basic slider from the image list.

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

5. Initialize the slider a cross-fading slideshow.

$('#slider-demo').freeSimpleSlider({
  animation: "fade" // or slide
});

6. Enable/disable slider controls.

$('#slider-demo').freeSimpleSlider({
  arrows: true,
  dots: true
});

7. Override the default autoplay interval in milliseconds.

$('#slider-demo').freeSimpleSlider({
  time: 5000
});

Change log:

2017-05-29

• JS update

---

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