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

first of all First download the package from the GitHub.
Installation

After that include bellow js file before closing body tag.

load Owl Carousel CDN files

HTML Code

    
Tamilrokets
    
hdhub
    
Tamilmovie
    
mp3rules
    
mp4movies
    
pakainfo

javascript Code

Don’t Miss : Owl Carousel Vertical Slider

owl carousel Options

Classes

    

        

            
...
            
...
            
...
        
    
    

        
prev
        
next
    
    

        

        

        

    

Events

event calls on certain movements.

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

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

trigger events and handle the Owl carousel.

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

$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})

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

Callbacks

$('.owl-carousel').owlCarousel({
    onDragged: callbackFunction
});
function callbackFunction(event) {
    // your code goes here...
}

Data

function callback(event) {

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

    var pages     = event.page.count;     
    var page      = event.page.index;    
    var size      = event.page.size;      
}

Carousel