@@include('./_head.html', { "path": "../..", "title": "Pixel Documentation - Owl carousels" })
@@include('./_docs-sidebar.html', { "path": "../..", "docs-path": ".." })

Owl carousels

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Owl Carousel documentation

Installation

Include css

First, include two CSS files into your HTML head:

                                        
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">   
                                        
                                    

owl.carousel.css file is required and should be included before any *.js files.

owl.theme.default.min.css file is optional and feel free to edit it. However, it is required if you'd like the default nav controls like dots or next buttons. Inside the source package you can also find SCSS files for easy generation of your own themes.

Include JS

Yep, include jQuery and owl.carousel.min.js into the footer.

                                        
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
                                        
                                    
Set HTML
                                        
<!-- Set up your HTML -->
<div class="owl-carousel">
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
</div>
                                        
                                    
Call the plugin

Now call the Owl initializer function and your carousel is ready.

                                        
$(document).ready(function(){
    $(".owl-carousel").owlCarousel();
});
                                        
                                    

Examples

Mouswheel scrolling

To add mouswheel scrolling just include the fantastic plugin jquery.mousewheel.js created by Brandon Aaron.Link to plugin GitHub page

                                                        
<div class="mouswheel-carousel  owl-carousel owl-theme">
    <div class="item"><h4>Item 1</h4></div>
    <div class="item"><h4>Item 2</h4></div>
    <div class="item"><h4>Item 3</h4></div>
    <div class="item"><h4>Item 4</h4></div>
    <div class="item"><h4>Item 5</h4></div>
</div>
                                                        
                                                    
                                                            
var owl = $('.mouswheel-carousel');
owl.owlCarousel({
    loop:true,
    nav:false,
    margin:10,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },            
        960:{
            items:2
        },
        1200:{
            items:2
        }
    },
    navText: [
        '<i class="fas fa-long-arrow-alt-left"></i>',
        '<i class="fas fa-long-arrow-alt-right"></i>'
    ]
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});
                                                            
                                                        
Autoplay
                                                        
<div class="autoplay-carousel owl-carousel owl-theme">
    <div class="item"><img src="../../assets/img/blog/image-1.jpg" alt="First slide"></div>          
    <div class="item"><img src="../../assets/img/blog/image-2.jpg" alt="Second slide"></div>
    <div class="item"><img src="../../assets/img/blog/image-3.jpg" alt="Third slide"></div>
    <div class="item"><img src="../../assets/img/blog/image-4.jpg" alt="Fourth slide"></div>
</div>
                                                        
                                                    
                                                            
$('.autoplay-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    items:1,
    autoplay:true,
    autoplayTimeout:3000,
    navText: [
        '<i class="fas fa-long-arrow-alt-left"></i>',
        '<i class="fas fa-long-arrow-alt-right"></i>'
    ]
});
                                                            
                                                        
@@include('./_scripts.html', { "path": "../.." })