Responsive Flexible Image Carousel Plugin For jQuery - Flex-Slider

Flex-Slider is a simple, flexible, fully responsive and configurable jQuery carousel slider plugin that supports multiple images on each slide.

More features:

• Auto switches to single-image slider in mobile view.
• Auto rotation with configurable interval.
• Full width mode supported.
• Cross browser. Supports modern browsers and IE 8/9/10/11.

How to use it:

1. Load the latest version of jQuery JavaScript library and the jQuery Flex-slider plugin's JavaScript & CSS files in the html file.

<link rel="stylesheet" href="np-slider.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="np-slider.js"></script>

2. Insert image groups to the slider following the markup structure like this:

<div id="np-slider-wrapper">
  <ul id="np-slider">
      <li class="np-slide">
          <div class="np-row">
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="1.jpg" class="sm-img"></a>
              </div>
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="2.jpg" class="sm-img"></a>
              </div>
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="3.jpg" class="sm-img"></a>
              </div>
          </div>
      </li>
      <li class="np-slide">
         <div class="np-row">
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="4.jpg" class="sm-img"></a>
              </div>
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="5.jpg" class="sm-img"></a>
              </div>
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="6.jpg" class="sm-img"></a>
              </div>
          </div>
      </li>
      <li class="np-slide">
          <div class="np-row">
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="7.jpg" class="sm-img"></a>
              </div>
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="8.jpg" class="sm-img"></a>
              </div>
              <div class="np-grid-4 bigger">
                  <a href="#"><img src="9.jpg" class="sm-img"></a>
              </div>
          </div>
      </li>
  </ul>
</div>

3. If you'd like to display a single image on each slide:

<div id="np-slider-wrapper">
  <ul id="np-slider">
    <li class="np-slide"> <img src="1.jpg" class="img-responsive"> </li>
    <li class="np-slide"> <img src="2.jpg" class="img-responsive"> </li>
    <li class="np-slide"> <img src="3.jpg" class="img-responsive"> </li>
    <li class="np-slide"> <img src="4.jpg" class="img-responsive"> </li>
  </ul>
</div>
<div class="np-controlls">
  <button class="np-left"> <img src="images/slider/arrow_r.png"> </button>
  <button class="np-right"> <img src="images/slider/arrow_l.png"> </button>
</div>

4. Call the function npSlider on the top container and done.

$("#np-slider").npSlider({
  // options here
});

5. Plugin's default options to customize the carousel slider.

$("#np-slider").npSlider({

  // auto play
  autoplay: true,

  // autoplay interval
  play_duration: 3000,

  // single mode
  single: false,

  // space between slides
  slide_space: 0,

  // transition speed
  slide_time: 300,

  // space for next slide
  next_slide_space: 0,

  // max height of slider
  slider_max_height: null,

  // full width mode
  full_width: true,

  // parent width
  parent_width: false,

  // space between grids
  grid_space: 10,

  // how many images per slide
  slider_type: 5,

  // single mode in mobile view
  slingle_slide_on_phone: true

});

Change log:

2017-02-15

• responsive updates

2016-12-29

• added more slider types

---

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