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 -->
</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.