Fully Responsive Image Slider Plugin with jQuery - responsiveSlider

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.