how to use owl carousel – How to add OWL Carousel slider in HTML?

first of all First download the package from the GitHub.

After that include bellow js file before closing body tag.

load Owl Carousel CDN files


javascript Code

Don’t Miss : Owl Carousel Vertical Slider

owl carousel Options

Name Type Default Description
items Number 3 The number of items you want to see on the screen
margin Number 0 margin-right(px) on item
loop Boolean false Infinite loop
center Boolean false Center item, even an odd number of items
mouseDrag Boolean true Can change the item with mouse drag
touchDrag Boolean true Can change the item with touch
pullDrag Boolean true Stage pull to edge
freeDrag Boolean false Item pull to edge
stagePadding Number 0 Padding left and right on stage
merge Boolean true Fit merged items if screen is smaller than items value
mergeFit Boolean true Fit merged items if screen is smaller than items value
autoWidth Boolean false Set non grid content. Try using width style on divs
startPosition Number/String 0 Start position or URL Hash string like ‘#id’
URLhashListener Boolean false Listen to url hash changes, data-hash on items is required
nav Boolean false Show next/prev buttons
rewind Boolean true Go backwards when the boundary has reached
navText Array [‘next’,’prev’] HTML allowed
navElement String div DOM element type for a single directional navigation link
slideBy Number/String 1 Navigation slide by no. of page string can be set to slide by page
slideTransition String You can define the transition for the stage you want to use eg. linear
dots Boolean true Show dots navigation
dotsEach Number/Boolean false Show dots each no. of item
dotsData Boolean false Used by data-dot content
lazyLoad Boolean false Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not img
lazyLoadEager Number 0 Eagerly pre-loads images to the right based on how many items you want to preload
autoplay Boolean false Autoplay
autoplayTimeout Number 5000 Autoplay interval timeout
autoplayHoverPause Boolean false Pause on mouse hover
smartSpeed Number 250 Speed Calculate, More info to come
fluidSpeed Boolean Number Speed Calculate, More info to come
autoplaySpeed Number/Boolean false autoplay speed
navSpeed Number/Boolean false Navigation speed
dotsSpeed Boolean Number/Boolean Pagination speed
dragEndSpeed Number/Boolean false Drag end speed
callbacks Boolean true Enable callback events
responsive Object empty object Object containing responsive options, Can be set to false to remove responsive capabilities
responsiveRefreshRate Number 200 Responsive refresh rate
responsiveBaseElement DOM element window Set on any DOM element, If you care about non responsive browser then use it on main wrapper
video Boolean false Enable fetching YouTube/Vimeo/Vzaar videos
videoHeight Number/Boolean false Set height for videos
videoWidth Number/Boolean false Set width for videos
animateOut String/Boolean false Class for CSS3 animation out
animateIn String/Boolean false Class for CSS3 animation in
fallbackEasing String swing Easing for CSS2 $.animate
info Function false Callback to retrieve basic information. Info function second parameter is Owl DOM object reference
nestedItemSelector String/Class false Use it if owl items are deep nested inside some generated content. Don’t use dot before class name
itemElement String div DOM element type for owl-item
stageElement String div DOM element type for owl-stage
navContainer String/Class/ID/Boolean false Set your own container for nav
dotsContainer String/Class/ID/Boolean false Set your own container for nav
checkVisible Boolean true If you know the carousel will always be visible you can set `checkVisibility` to `false` to prevent the expensive browser layout forced reflow the $‘:visible’) does



event calls on certain movements.

var owl = $('.owl-carousel');

owl.on('changed.owl.carousel', function(event) {
    // your code goes here...

trigger events and handle the Owl carousel.

var owl = $('.owl-carousel');

$('.customNextBtn').click(function() {

$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);


    onDragged: callbackFunction
function callbackFunction(event) {
    // your code goes here...


function callback(event) {

    var element   =;         
    var name      = event.type;           
    var namespace = event.namespace;      
    var items     = event.item.count;     
    var item      = event.item.index;     

    var pages     =;     
    var page      =;    
    var size      =;      


Name Type Callback Parameter Description
initialize.owl.carousel attachable onInitialize   When the plugin initializes
initialized.owl.carousel attachable onInitialized   When the plugin has initialized
resize.owl.carousel attachable onResize   When the plugin gets resized
resized.owl.carousel attachable onResized   When the plugin has resized
refresh.owl.carousel attachable, cancelable, triggerable onRefresh [event, speed] When the internal state of the plugin needs update
refreshed.owl.carousel attachable onRefreshed   When the internal state of the plugin has updated
drag.owl.carousel attachable onDrag   When the dragging of an item is started
dragged.owl.carousel attachable onDragged   When the dragging of an item has finished
translate.owl.carousel attachable onTranslate   When the translation of the stage starts
translated.owl.carousel attachable onTranslated   When the translation of the stage has finished
change.owl.carousel attachable onChange property When a property is going to change its value
changed.owl.carousel attachable onChanged property When a property has changed its value
next.owl.carousel triggerable   [speed] Goes to next item
prev.owl.carousel triggerable   [speed] Goes to previous item
to.owl.carousel triggerable   [position, speed] Goes to position
destroy.owl.carousel triggerable     Destroys carousel
replace.owl.carousel triggerable   data Removes current content and add a new one passed in the parameter
add.owl.carousel triggerable   [data, position] Adds a new item on a given position
remove.owl.carousel triggerable   position Removes an item from a given position

Leave a Comment