# 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-controls">
            <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>
    </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.

#### navContainerClass

Type: `String`
Default: `owl-nav`

Navigation container class.

#### navClass

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

Navigation buttons classes.

#### controlsClass

Type: `String`
Default: `owl-controls`

Controls container class - wrapper for navs and dots.

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