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.










