Cislunar has several predefined classes for owl carousel and its own way to work with owl carousel.


Owl Carousel Syntax In Theme

Mostly the syntax is same with default owl carousel syntax, however you do not need to initialize the carousel in javascript file, because every carousel is initialized automatically. if you want to disabled that and call the plugin via javascript, add .cl-manual class with .owl-carousel.

data-options="{}" attribute is used to pass options for carousel as object. Read more about Owl Carousel options here

<div class="owl-carousel" data-options='{...}'>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>

Owl Carousel Classes

There are several classes for Owl Carousel with predefined options for optimal use. Use these classes with .owl-carousel. the classes are described as below:

  • .cl-banner-slider: This is used for banner carousel, loop enabled.
  • .cl-carousel-center: This is used for carousel with centered item, loop enabled.
  • .cl-carousel-one-item: This is used for carousel with one item, loop enabled.
  • .cl-carousel-two-item: This is used for carousel with two items, loop enabled.
  • .cl-carousel-three-item: This is used for banner three items, loop enabled.
  • .cl-carousel-six-item: This is used for carousel with six items, loop enabled.

An example of .cl-carousel-two-item is below: