Responsive 3D Image Rotator with jQuery and CSS3 - mk-3Dcarousel

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

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.