Owl Carousel with Material Design UI

Carousel is a component that can be used as an slider to slide elements like images, cards, text etc. It is touch enabled making it especially smooth to use on mobile. We have used Owl Carousel as base and applied elements that follow material design principles to it.

For more options and documentation, visit: Owl Carousel

Basic Owl Carousel

Add class .item to the elements and .owl-carousel to the div wrapping the items. In case of using multiple carousels in one page, the id of each one should be unique.

Propeller Card Carousel

You can add cards as items in the carousel.

Responsive Carousel

You can fix the no of items you would like to display as per the display size by using the responsive option. For example you can display 4 items in desktop size and 2 items in mobile device.

Carousel with First Item Center

You can call the first item in the center by adding center:true.

Carousel with First Item Center and Loop False

You can call the first item in the center by adding center:true and stop the loop by adding loop:false.

Carousel with Merged Items

If you have images with different width but same heigt, you can display them in a carousel form using merge:true option in the Javascript and assigning the data-merge attribute to the items as per their sizes.

Carousel with URL Navigation

You can add navigation links to navigate through the carousel when there are lot of items. Add data-hash attribute to the items.

Carousel with Stage Padding

Add stagePadding option to display some part of the items at the start and end to give the idea of scrolling for other items.

Animated Carousel

Add animated effect while slide in and slide out by using animateIn and animateOut options respectively.

Autoplay Carousel

To keep the carousel play automatically, add autoplay:true option. Also set the time out of the item using autoplayTimeout option.

Video Carousel

You can even show videos in a slider.

Carousel with Auto Height

Add autoHeight:true to automatically set the height of the carousel based on the height of the content.