Carousel

The Canvas carousel is an Owl Carousel wrapper for horizontally scrolling any content: images, portfolio items, blog posts, products, or testimonials. It is fully responsive with per-breakpoint item counts, optional autoplay, navigation arrows, and pagination dots.

Core Markup

Add .owl-carousel (plus .carousel-widget) and place each item in an .oc-item:

<div class="owl-carousel image-carousel carousel-widget"
     data-items="4" data-margin="20" data-nav="true" data-pagi="false"
     data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5">
    <div class="oc-item">
        <a href="#"><img src="images/portfolio/1.jpg" alt="Thumbnail one"></a>
    </div>
    <div class="oc-item">
        <a href="#"><img src="images/portfolio/2.jpg" alt="Thumbnail two"></a>
    </div>
    <div class="oc-item">
        <a href="#"><img src="images/portfolio/3.jpg" alt="Thumbnail three"></a>
    </div>
</div>

Key Attributes

data-items: base items per view. Default: 4.
data-items-xs / -sm / -md / -lg / -xl / -xxl: items per view at each breakpoint (0, 576, 768, 992, 1200, 1400px). Each defaults to the next smaller value.
data-margin: gap between items in px. Default: 20.
data-nav: false to hide prev/next arrows. Default: arrows shown.
data-nav-prev / data-nav-next: custom arrow HTML. Defaults are Unicons angle icons.
data-pagi: false to hide the pagination dots. Default: dots shown.
data-loop: true to loop infinitely. Default: false.
data-autoplay: milliseconds per slide to enable autoplay (for example 5000). Enabling it also pauses on hover.
data-speed: transition speed in ms. Default: 250.
data-margin, data-stage-padding, data-center, data-auto-width: layout tuning.
data-start: starting index. Default: 0.
data-slideby: number of items to advance, or page. Default: 1.
data-lazyload: true to enable Owl lazy loading.
data-animate-in / data-animate-out: Animate.css class names for slide transitions.
data-rtl: true for right-to-left.

Note: the plugin reads data-nav, not data-arrows. And navigation defaults to on, pagination to on.

Responsive Item Counts

Show fewer items on small screens and more on large:

<div class="owl-carousel portfolio-carousel carousel-widget"
     data-pagi="false"
     data-items-xs="1" data-items-sm="2" data-items-md="3" data-items-lg="4">
    <div class="oc-item">...</div>
    <div class="oc-item">...</div>
</div>

Autoplay Loop

<div class="owl-carousel carousel-widget"
     data-loop="true" data-autoplay="5000" data-nav="false"
     data-items-xs="1" data-items-md="3">
    <div class="oc-item">...</div>
</div>

Custom Arrows

<div class="owl-carousel carousel-widget"
     data-nav="true"
     data-nav-prev="&lt;i class='bi-chevron-left'&gt;&lt;/i&gt;"
     data-nav-next="&lt;i class='bi-chevron-right'&gt;&lt;/i&gt;">
    <div class="oc-item">...</div>
</div>

Tips

When dots render, the plugin adds with-carousel-dots to the carousel so you can style spacing for the dot row.
Combine data-lazyload="true" with lazy images to defer offscreen slide images; the carousel refreshes once they load.
Set an explicit small data-items-xs (often 1 or 2) so mobile screens are not cramped.

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

Canvas auto-inits .carousel-widget (Owl Carousel) elements from their data-* attributes. To run your own config, add the customjs class so Canvas ignores the element, then call owlCarousel() yourself.

<div class="carousel-widget customjs" id="my-carousel">
    <div class="oc-item"><img src="images/1.jpg" alt=""></div>
    <div class="oc-item"><img src="images/2.jpg" alt=""></div>
    <div class="oc-item"><img src="images/3.jpg" alt=""></div>
</div>

SEMICOLON.Custom.onLoad = function () {
    jQuery('#my-carousel').owlCarousel({
        margin: 20,
        loop: true,
        nav: true,
        dots: false,
        autoplay: true,
        responsive: {
            0:   { items: 1 },
            768: { items: 2 },
            992: { items: 3 }
        }
    });
};

Otherwise, drive the built-in init with attributes such as data-items, data-margin, data-nav, data-pagi, data-loop, data-autoplay and the per-breakpoint data-items-sm/md/lg/xl/xxl.

Was this page helpful?

Related docs

Responsive Slider