Covid 19 Precautionary Measures
  • Stay at home ๐Ÿก
  • Wash your hands frequently ๐Ÿงผ
  • Maintain social distancing ๐ŸคโŒ
  • Avoid touching eyes, nose and mouth โ˜น

A Simple 3D & Responsive Image Carousel

A Simple 3D & Responsive Image Carousel

Intro

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

Dependencies

Installation

Install jQuery

1
  $ npm install --save jquery

Install mk-3dcarousel

1
  $ npm install --save mk-3dcarousel

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

HTML Usage

1
2
3
4
5
  <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

1
2
3
4
5
  $(function(){
    $('#mkCarousel').mkCarousel({
      // Options goes here
    });
  });

Have a look here for options to customize your carousel.

Demo

Click here for demo.

Support

  • IE 10+
  • Firefox 10+
  • Google Chrome 12+
  • Safari 9+
  • Android Browser 3+
Masoom Ul Haq S
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.

comments powered by Disqus
You may also like:
Be the first to know about my upcoming writings.