You can add an Carousel on any Page using the Code below:
<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>| Setting | Description |
|---|---|
|
No. of Items to display in the Carousel. Ex: |
|
No. of Items to display in the Carousel on Desktops/Laptops. Ex: |
|
No. of Items to display in the Carousel on Netbooks. Ex: |
|
No. of Items to display in the Carousel on iPads/Tablets. Ex: |
|
No. of Items to display in the Carousel on Mobile Landscape. Ex: |
|
No. of Items to display in the Carousel on Mobile Portrait. Ex: |
|
Enable/Disable Loop. Option(s): true or false Ex: |
|
Autoplay timer in milliseconds. Ex: |
|
Speed of the Carousel Animation in milliseconds. Ex: |
|
Enable/Disable Navigation Arrows. Option(s): true or false Ex: |
|
Enable/Disable Pagination Dots. Option(s): true or false Ex: |
|
The margin between Carousel Items in pixels. Ex: |
|
Padding on the Edges of the Carousel Container in pixels. Ex: |
|
Enable/Disable Item Merging. Option(s): true or false Ex: |
|
Item Index to start the Carousel from. Ex: |
|
Enable/Disable Carousel Rewind. Option(s): true or false Ex: |
|
No. of Items to Slide at once. Ex: |
|
Enable/Disable Centering. Option(s): true or false Ex: |
|
Enable/Disable Lazyload. Option(s): true or false Ex: |
|
Enable/Disable Video Carousel Items. Option(s): true or false Ex: |
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.
Last Modified: May 31, 2020