API

Classes

This is an example of how html is rendered. With the following options you can change almost every class the way you want

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-nav">
        <div class="owl-prev">prev</div>
        <div class="owl-next">next</div>
    </div>
    <div class="owl-dots">
        <div class="owl-dot active"><span></span></div>
        <div class="owl-dot"><span></span></div>
        <div class="owl-dot"><span></span></div>
    </div>
</div>

Options

refreshClass

Type: String
Default: owl-refresh

Class during refresh.


loadingClass

Type: String
Default: owl-loading

Class during load.


loadedClass

Type: String
Default: owl-loaded

Class after load.


rtlClass

Type: String
Default: owl-rtl

Class for right to left mode.


dragClass

Type: String
Default: owl-drag

Class for mouse drag mode.


grabClass

Type: String
Default: owl-grab

Class during mouse drag.


stageClass

Type: String
Default: owl-stage

Stage class.


stageOuterClass

Type: String
Default: owl-stage-outer

Stage outer class.


Type: String
Default: owl-nav

Navigation container class.


Type: Array
Default: [&#x27;owl-prev&#x27;,&#x27;owl-next&#x27;]

Navigation buttons classes.


dotClass

Type: String
Default: owl-dot

Dot Class.


dotsClass

Type: String
Default: owl-dots

Dots container class.


autoHeightClass

Type: String
Default: owl-height

Auto height class.


responsiveClass

Type: String|Boolean
Default: false

Optional helper class. Add '<responsiveClass>-<breakpoint>' class to main element. Can be used to stylize content on given breakpoint.


Next Step

Events