@@include('./_head.html', { "path": "../..", "title": "Pixel Documentation - Owl carousels" })
MenuTouch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
Owl Carousel documentationFirst, 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.
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 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>
Now call the Owl initializer function and your carousel is ready.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Basic usage of Owl Carousel. I used loop:true
and margin:10
. The structure works with any kind of DOM element. In all of my examples i used <div class="item">...</div>
but you could put any other element div/span/a/img...
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="basic-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>
$('.basic-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:3
}
},
navText: [
'<i class="fas fa-long-arrow-alt-left"></i>',
'<i class="fas fa-long-arrow-alt-right"></i>'
]
});
To add mouswheel scrolling just include the fantastic plugin jquery.mousewheel.js created by Brandon Aaron.Link to plugin GitHub page
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
<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();
});
<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>'
]
});