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 |

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 --> </div>
2. Place jQuery library and the plugin's CSS/JS files into the webpage.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></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); slider('#slide-wrap',4,1,obj);
This awesome jQuery plugin is developed by yevgetman. For more Advanced Usages, please check the demo page or visit the official website.