Carousel

You can add an Carousel on any Page using the Code below:

Code Example

<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.

Ex: data-items="5"

data-items-xl

No. of Items to display in the Carousel on Desktops/Laptops.

Ex: data-items-xl="5"

data-items-lg

No. of Items to display in the Carousel on Netbooks.

Ex: data-items-lg="5"

data-items-md

No. of Items to display in the Carousel on iPads/Tablets.

Ex: data-items-md="4"

data-items-sm

No. of Items to display in the Carousel on Mobile Landscape.

Ex: data-items-sm="3"

data-items-xs

No. of Items to display in the Carousel on Mobile Portrait.

Ex: data-items-xs="2"

data-loop

Enable/Disable Loop.

Option(s): true or false

Ex: data-loop="true"

data-autoplay

Autoplay timer in milliseconds.

Ex: data-autoplay="5000"

data-speed

Speed of the Carousel Animation in milliseconds.

Ex: data-speed="700"

data-nav

Enable/Disable Navigation Arrows.

Option(s): true or false

Ex: data-nav="true"

data-pagi

Enable/Disable Pagination Dots.

Option(s): true or false

Ex: data-pagi="true"

data-margin

The margin between Carousel Items in pixels.

Ex: data-margin="20"

data-stage-padding

Padding on the Edges of the Carousel Container in pixels.

Ex: data-stage-padding="20"

data-merge

Enable/Disable Item Merging.

Option(s): true or false

Ex: data-merge="true"

data-start

Item Index to start the Carousel from.

Ex: data-start="3"

data-rewind

Enable/Disable Carousel Rewind.

Option(s): true or false

Ex: data-rewind="true"

data-slideby

No. of Items to Slide at once.

Ex: data-slideby="2"

data-center

Enable/Disable Centering.

Option(s): true or false

Ex: data-center="false"

data-lazyload

Enable/Disable Lazyload.

Option(s): true or false

Ex: data-lazyload="true"

data-video

Enable/Disable Video Carousel Items.

Option(s): true or false

Ex: data-video="true"

Last Modified: May 31, 2020