Multi-Carousel Plugin with jQuery and CSS3 | carousel.pn

How to make use of it:

1. To get began, include a jQuery library and the carousel.pn plugin’s information on the net web page.

<link rel="stylesheet" href="/path/to/css/carousel.pn.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/carousel.pn.js"></script>

2. Create the HTML for the multi-display carousel.

<div class="carousel carousel-example">
  <div class="carousel_container">
    <ul>
      <!-- Images Will Be Placed Here -->
    </ul>
  </div>
  <div class="carousel_container">
    <ul>
      <!-- Images Will Be Placed Here -->
    </ul>
  </div>
  <!-- Carousel Controls -->
  <div class="control prev"><span>&#8249;</span></div>
  <div class="control next"><span>&#8250;</span></div>
</div>

3. Define an array of photos to be introduced within the carousel.

var imgList = [
    '<li class="content"> <img src="1.jpg"> </li>',
    '<li class="content"> <img src="2.jpg"> </li>',
    '<li class="content"> <img src="3.jpg"> </li>',
    '<li class="content"> <img src="4.jpg"> </li>',
    '<li class="content"> <img src="5.jpg"> </li>'
]

4. Initialize the carousel and accomplished.

carousel({
  carouselPath: '.carousel-example',
  contents: imgList,
});

5. Customize the transition impact.

carousel({
  carouselPath: '.carousel-example',
  contents: imgList,
  Duration: 2000, // default: 1000
  Easing: 'easeInOutBack',
  Delay: 500, // default: 0
});

6. Or create your personal transitions utilizing the next capabilities.

carousel({
  carouselPath: '.carousel-example',
  contents: imgList,
  startAnimation: function (path) {
    // ...
  },
  finalAnimation: function (path) {
    // ...
  }
});

Multi-Display Carousel Plugin/Github, multi item slider jquery, carousel slider plugin, carousel multiple items responsive

See Demo And Download