Carousel
You can add an Carousel on any Page using the Code below:
Usage
<div class="owl-carousel image-carousel carousel-widget" data-margin="20" data-nav="true" data-pagi="false" data-items-xs="2" data-items-sm="3" data-items-md="4" data-items-lg="5">
<div class="oc-item">
<a href="#"><img src="images.jpg" alt="Image 1"></a>
</div>
<div class="oc-item">
<a href="#"><img src="images.jpg" alt="Image 2"></a>
</div>
<div class="oc-item">
<a href="#"><img src="images.jpg" alt="Image 3"></a>
</div>
<div class="oc-item">
<a href="#"><img src="images.jpg" alt="Image 4"></a>
</div>
<div class="oc-item">
<a href="#"><img src="images.jpg" alt="Image 5"></a>
</div>
<div class="oc-item">
<a href="#"><img src="images.jpg" alt="Image 6"></a>
</div>
<div class="oc-item">
<a href="#"><img src="images1.jpg" alt="Image 7"></a>
</div>
</div>Settings
| Setting | Description |
|---|---|
data-items | No. of Items to display in the Carousel. Example: 5 |
data-items-xl | No. of Items to display in the Carousel on Desktops/Laptops. Example: 5 |
data-items-lg | No. of Items to display in the Carousel on Netbooks. Example: 5 |
data-items-md | No. of Items to display in the Carousel on iPads/Tablets. Example: 4 |
data-items-sm | No. of Items to display in the Carousel on Mobile Landscape. Example: 3 |
data-items-xs | No. of Items to display in the Carousel on Mobile Portrait. Example: 2 |
data-loop | Enable/Disable Loop. Example: true |
data-autoplay | Autoplay timer in milliseconds. Example: 5000 |
data-speed | Speed of the Carousel Animation in milliseconds. Example: 700 |
data-nav | Enable/Disable Navigation Arrows. Example: true |
data-pagi | Enable/Disable Pagination Dots. Example: true |
data-margin | The margin between Carousel Items in pixels. Example: 20 |
data-stage-padding | Padding on the Edges of the Carousel Container in pixels. Example: 20 |
data-merge | Enable/Disable Item Merging. Example: true |
data-start | Item Index to start the Carousel from. Example: 3 |
data-rewind | Enable/Disable Carousel Rewind. Example: true |
data-slideby | No. of Items to Slide at once. Example: 2 |
data-center | Enable/Disable Centering. Example: false |
data-lazyload | Enable/Disable Lazyload. Example: true |
data-video | Enable/Disable Video Carousel Items. Example: true |
Code Snippets
Owl Carousels are initialized using the Standard Functionality by default, but there might instances when you would have to Create a Custom Functionality. To use this you can simply add the .customjs Class to .carousel-widget Container as this will stop it from using the Default Functionality and allow you to extend the Owl Carousel with your own Custom Functionality.
You can find more Owl Carousel related Settings for Custom JS Initialization here.