responsiveGallery is a jQuery plugin helps you to create a responsive, coverflow-style image carousel/gallery with 3D perspective transforms.
How to use it:
1. Include the
jquery-responsiveGallery.css in the head section of the Html page.1 | <link rel="stylesheet" href="css/jquery-responsiveGallery.css"> |
2. Include jQuery library, modernizr.js and the jQuery responsiveGallery before the closing body tag.
1 | <script src="lib/modernizr.custom.js"></script> |
2 | <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> |
3 | <script src="src/jquery.responsiveGallery.js"></script> |
3. Build the structure for the coverflow-style carousel.
01 | <div class="w-gallery"> |
02 | <section id="responsiveGallery-container" class="responsiveGallery-container"> |
03 | |
04 | <a class="responsiveGallery-btn responsiveGallery-btn_prev" href="javascript:void(0);"></a> |
05 | <a class="responsiveGallery-btn responsiveGallery-btn_next" href="javascript:void(0);"></a> |
06 | |
07 | <ul class="responsiveGallery-wrapper"> |
08 | <li class="responsiveGallery-item"> |
09 | <a href="#" class="responsivGallery-link"> |
10 | <img src="1.jpg" height="320" width="320" alt="" class="responsivGallery-pic"> |
11 | </a> |
12 | <div class="w-responsivGallery-info"> |
13 | <h2 class="responsivGallery-name">Google</h2> |
14 | <h3 class="responsivGallery-position">www.google.com</h3> |
15 | </div> |
16 | </li> |
17 | |
18 | <li class="responsiveGallery-item"> |
19 | <a href="#" class="responsivGallery-link"> |
20 | <img src="2.jpg" height="320" width="320" alt="" class="responsivGallery-pic"> |
21 | </a> |
22 | <div class="w-responsivGallery-info"> |
23 | <h2 class="responsivGallery-name">Google</h2> |
24 | <h3 class="responsivGallery-position">www.google.com</h3> |
25 | </div> |
26 | </li> |
27 | |
28 | <li class="responsiveGallery-item"> |
29 | <a href="#" class="responsivGallery-link"> |
30 | <img src="3.jpg" height="320" width="320" alt="" class="responsivGallery-pic"> |
31 | </a> |
32 | <div class="w-responsivGallery-info"> |
33 | <h2 class="responsivGallery-name">Google</h2> |
34 | <h3 class="responsivGallery-position">www.google.com</h3> |
35 | </div> |
36 | </li> |
37 | </ul> |
38 | </section> |
39 | </div> |
4. Initialize the plugin.
1 | $(function () { |
2 | $('.responsiveGallery-wrapper').responsiveGallery({ |
3 | animatDuration: 400,// ms |
4 | $btn_prev: $('.responsiveGallery-btn_prev'), |
5 | $btn_next: $('.responsiveGallery-btn_next') |
6 | }); |
7 | }); |
This awesome jQuery plugin is developed by David-CodingSerf. For more Advanced Usages, please check the demo page or visit the official website.