Responsive 3D Image Rotator with jQuery and CSS3 - mk-3Dcarousel
File Size: | 9.41 KB |
---|---|
Views Total: | 4257 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

mk-3Dcarousel is a jQuery & CSS3 based carousel plugin used to create a 'coverflow' style responsive image rotator with 3D perspectives and reflections.
Basic usage:
1. Load the stylesheet mk-3Dcarousel.css
in the head section and the JavaScript file mk-3Dcarousel.js
at the the bottom of the document.
<link rel="stylesheet" href="css/mk-3Dcarousel.css"> ... <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="js/mk-3Dcarousel.js"></script>
2. Add a set of images you want to present into a container element.
<div class="mk-carousel" id="mkCarousel"> <img class="active" src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt=""> <img src="4.jpg" alt=""> <img src="5.jpg" alt=""> <img src="6.jpg" alt=""> <img src="7.jpg" alt=""> </div>
3. Initialize the 3D carousel plugin and we're done.
$('#mkCarousel').mkCarousel();
4. Plugin's default options.
$('#mkCarousel').mkCarousel({ responsive: true, breakpoint: 768, offset: 100, mobileOffset: 50, leftClass: 'image-left', rightClass: 'image-right', activeClass: 'active', controlNavs: true });
This awesome jQuery plugin is developed by masoomulhaqs. For more Advanced Usages, please check the demo page or visit the official website.