Multi Display Carousel Plugin With jQuery And CSS3 - carousel.pn

A modern, multi-display carousel jQuery plugin that loops through images just like sliding across different screens.

How to use it:

1. To get started, include jQuery library and the carousel.pn plugin's files on the 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 images to be presented in 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 done.

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

5. Customize the transition effect.

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

6. Or create your own transitions using the following functions.

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

---

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