Responsive Dynamic jQuery Content Slider Plugin - slider.js

File Size: 5.64 KB
Views Total: 3960
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Dynamic jQuery Content Slider Plugin - slider.js

slider.js is a jQuery slider plugin used to generated a responsive, dynamic, endless-looping carousel slider from mixed content defined in the JSON objects.

How to use it:

1. Create a slider wrapper in the webpage when needed.

<div id="slide-wrap">
  <!-- slider -->

2. Place jQuery library and the plugin's CSS/JS files into the webpage.

<script src="//"></script>
<script src="slider.js"></script>
<link rel="stylesheet" href="slider.css">

3. Define your slider data in a JSON object as follows:

var obj = [
       "url": "1.jpg",
       "title": "Title 1",
       "description": "Description 1"
       "url": "2.jpg",
       "title": "Title 2",
       "description": "Description 2"
       "url": "3.jpg",
       "title": "Title 3",
       "description": "Description 3"

4. Initialize the plugin and pass the following parameters to the slider.

  • id: ID of element into which slider will be loaded
  • pause: time interval (in seconds) between slide change
  • animationSpeed: time interval (in seconds) for slides to change
  • obj: JSON object containing url, title, and description information
// slider(id,pause,animationSpeed,obj);

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