Fully Responsive Image Slider Plugin with jQuery - responsiveSlider
File Size: | 316 KB |
---|---|
Views Total: | 1729 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin used to create a mobile-friendly responsive image slider that allows you to embed as many images in one slide based on the screen width.
How to use it:
1. Include jQuery library and the jQuery responsiveSlider plugin's JS & CSS files on your html page.
<link href="css/jquery-responsiveSlider.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="src/jquery.responsiveSlider.js"></script>
2. Add a list of images together with next/prev navigation buttons into the slider as follow.
<div class="your-slider-wrap"> <a class="slider-nav-arrow slider-arrow_left slider-nav-arrow_disable" href="javascript:void(0)"></a> <a class="slider-nav-arrow slider-arrow_right" href="javascript:void(0)"></a> <div class="your-slider responsiveSlider"> <ul> <li class="your-item"> <img src="1.jpg" alt="" class="your-item-pic"> <div class="your-item-title">BRAND CONSULTANCY</div> </li> <li class="your-item"> <img src="2.jpg" alt="" class="your-item-pic"> <div class="your-item-title">CONSUMER PR</div> </li> <li class="your-item"> <img src="3.jpg" alt="" class="your-item-pic"> <div class="your-item-title">EXPERIENTIAL & EVENTS</div> </li> <li class="your-item"> <img src="4.jpg" alt="" class="your-item-pic"> <div class="your-item-title">DIGITAL MARKETING</div> </li> <li class="your-item"> <img src="5.jpg" alt="" class="your-item-pic"> <div class="your-item-title">BRAND CONSULTANCY</div> </li> <li class="your-item"> <img src="6.jpg" alt="" class="your-item-pic"> <div class="your-item-title">CONSUMER PR</div> </li> ... </ul> </div> </div>
3. Call the plugin on the image list to active the slider.
$(function(){ $('.responsiveSlider').responsiveSlider({ slider_item_width: 250, slider_btn_disableClass: 'slider-nav-arrow_disable', $slider_btn_prev: $('.slider-arrow_left'), $slider_btn_next: $('.slider-arrow_right') }); });
Change log:
2015-04-20
- fixed an animation bug
This awesome jQuery plugin is developed by David-CodingSerf. For more Advanced Usages, please check the demo page or visit the official website.