Minimalist Responsive Image Slider Carousel Plugin

Minimalist Responsive Image Slider Carousel Plugin
File Size: 4.41 KB
Views Total: 1329
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A dead simple, CSS-less jQuery slider plugin for creating a basic image carousel that supports infinite looping, responsive scaling, easing effects and custom animation speed.

How to use it:

1. Create a group of images you want to present in the slider carousel.

<div id="slider">
  <div><img src="1.jpg"></div>
  <div><img src="2.jpg"></div>
  <div><img src="3.jpg"></div>
  ...
  <div><img src="x.jpg"></div>
</div>

2. Place jQuery library and the jQuery SimpleResponsiveSlider plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="slider.js"></script>

3. Call the function to initialize the plugin.

$('#slider').SimpleResponsiveSlider();

4. Override the default settings in the slider.js

// animation duration in seconds
var animationDuration = 2;

// animation delay in seconds
var animationDelay = 1;

// easing effect
var animationEasing = 'ease-out';

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