Minimal Responsive Image Carousel Plugin With jQuery - SimpleSlider

Minimal Responsive Image Carousel Plugin With jQuery - SimpleSlider
File Size: 8.35 KB
Views Total: 4273
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="//"></script>
<script src="dist/free-simple-slider.js"></script>

2. Load the OPTIONAL hammer.js library.

<script src="//"></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>

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


5. Initialize the slider a cross-fading slideshow.

  animation: "fade" // or slide

6. Enable/disable slider controls.

  arrows: true,
  dots: true

7. Override the default autoplay interval in milliseconds.

  time: 5000

Change log:


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