Easy Coverflow Carousel Plugin For jQuery Carousel js - Download Easy Coverflow Carousel Plugin For jQuery - Carousel.js

Download Easy Coverflow Carousel Plugin For jQuery – Carousel.js

By Posted on

This time I will share jQuery Plugin and tutorial about Easy Coverflow Carousel Plugin For jQuery – Carousel.js, hope it will help you in programming stack.

File Size: 41.6 KB
Views Total: 11801
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A cross-browser (IE8+) jQuery plugin used for create a coverflow-style 3D perspective image carousel / rotator with convenient configuration options.

How to use it:

1. Create a list of images to be displayed in the carousel.

view source
1 <ul class="poster-list">
2   <li class="poster-item"><a href="#"><img src="1.jpg" alt="" width="100%" /></a></li>
3   <li class="poster-item"><a href="#"><img src="2.jpg" alt="" width="100%" /></a></li>
4   <li class="poster-item"><a href="#"><img src="3.jpg" alt="" width="100%" /></a></li>
5   <li class="poster-item"><a href="#"><img src="4.jpg" alt="" width="100%" /></a></li>
6   <li class="poster-item"><a href="#"><img src="5.jpg" alt="" width="100%" /></a></li>
7  </ul>

2. Create navigation buttons which allow the user to rotate through the images manually.

view source
1 <div class="poster-btn poster-prev-btn"></div>
2 <div class="poster-btn poster-next-btn"></div>

3. The wrap them into a container element and override the default settings in the data-setting attribute . The whole markup structure should be like this:

view source
01 <div class="poster-main" id="carousel" data-setting='{
02        <!-- options here -->
03      }'>
04   <div class="poster-btn poster-prev-btn"></div>
05   <ul class="poster-list">
06     <li class="poster-item"><a href="#"><img src="1.jpg" alt="" width="100%" /></a></li>
07     <li class="poster-item"><a href="#"><img src="2.jpg" alt="" width="100%" /></a></li>
08     <li class="poster-item"><a href="#"><img src="3.jpg" alt="" width="100%" /></a></li>
09     <li class="poster-item"><a href="#"><img src="4.jpg" alt="" width="100%" /></a></li>
10     <li class="poster-item"><a href="#"><img src="5.jpg" alt="" width="100%" /></a></li>
11   </ul>
12   <div class="poster-btn poster-next-btn"></div>
13 </div>

4. Initialize the carousel and done.

view source
1 <a href="https://www.jqueryscript.net/tags.php?/Carousel/">Carousel</a>.init($("#carousel"));
2 $("#carousel").init();

5. All possible plugin options:

view source
01 // carousel width
02 "width": 1000,
03  
04 // carousel height
05 "height": 270,
06  
07 // image width
08 "posterWidth": 640,
09  
10 // image height
11 "posterHeight": 270,
12  
13 // aspect ratio
14 "scale": 0.8,
15  
16 // animation speed
17 "speed": 1000,
18  
19 // auto play
20 "autoPlay": true,
21  
22 // auto play interval
23 "delay": 2000,
24  
25 // 'top', 'bottom' or 'middle'
26 "verticalAlign": "bottom"

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

source : jqueryscript.net

Related posts: