Multi Display Carousel Plugin With jQuery And CSS3 - carousel.pn
File Size: | 153 KB |
---|---|
Views Total: | 1277 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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>‹</span></div> <div class="control next"><span>›</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.