Feature Image: A Simple 3D & Responsive Image Carousel
Read progress

Lockdown is for Our Safety

  • Stay at home 🏡
  • Wash your hands frequently 🧼
  • Maintain social distancing 🤝❌
  • Avoid touching eyes, nose and mouth ☹
More Info
  • Home
  • Blog
  • A Simple 3D & Responsive Image Carousel

A Simple 3D & Responsive Image Carousel

Easy navigation to:

Intro

MK 3D Carousel is a simple & a responsive 3D Image Carousel plugin created using JQUERY & CSS3.

Dependencies

Installation

Install jQuery
  $ npm install --save jquery
Install mk-3dcarousel
  $ npm install --save mk-3dcarousel

or download it from here. Post-installation, include CSS & JS files to your page.

HTML Usage

  <div class="mk-carousel" id="mkCarousel">
    <img class="active" src="<your-path>/file-name-01.jpg" alt="File Name 1">
    <img src="<your-path>/file-name-02.jpg" alt="File Name 2">
    <!-- ... Image list goes here -->
  </div>

Add mk-carousel class to the wrapper element and list the images you want in the carousel as defined in the above fashion.

JavaScript Usage

  $(function(){
    $('#mkCarousel').mkCarousel({
      // Options goes here
    });
  });

Have a look here for options to customize your carousel.

Demo

A Simple 3D & Responsive Image Carousel Click here for demo.

Support

  • IE 10+
  • Firefox 10+
  • Google Chrome 12+
  • Safari 9+
  • Android Browser 3+
Masoom Ul Haq S logo
About author
Masoom Ul Haq S

Masoom is a Front-end Developer, a UX Engineer and Freelancer based in Bangalore, India. Like to develop differential and effective User Experiences for digital products using an amalgamation of latest technology and best practises.

Be the first to know about my upcoming writings.

By using our site, you acknowledge that you have read and understand our Privacy Policy.