Skip to main content

Owl carousel

Pre-requisites

These need to be included in the <head>.

<link rel="stylesheet" href="/fac/soc/economics/apps/plugins/owl-carousel-2/owl.carousel.css">
<link rel="stylesheet" href="/fac/soc/economics/apps/plugins/owl-carousel-2/owl.theme.default.min.css">

<script type="text/javascript" src="/fac/soc/economics/apps/plugins/owl-carousel-2/owl.carousel.min.js"></script>
<!-- Owl carousel accessibility layer-->
<script type="text/javascript" src="/fac/soc/economics/apps/plugins/owl-carousel-2/owlcarousel2-a11ylayer.js">
</script>

HTML

Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

<div id="owl-example" class="owl-carousel">
 <div> Content 1 </div>
 <div> Content 2 </div>
</div>

Call the plugin

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

jQuery(document).ready(function($) {
 
 $("#owl-example").owlCarousel({
 loop: true, // set slider to create infinite loop
 rewind: false, // stop slider from going back go first item as we now have loop set to true
 rewindSpeed: 0, // sets speed to 0 to avoid flickering effect on images
 items: 1, // number of items to display 
 nav: true, // show navigation
 singleItem:true 
 }); 
});

Responsive styles

Set carousel behaviour for different breakpoints using responsiveClass:true when calling the carousel.
You can also set different behaviour depending on the breakpoints.

jQuery(document).ready(function($) {
 $("#owl-responsive-example").owlCarousel({
     loop:true,
      margin:10,
      responsiveClass:true,
      responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }

});

Image carousel demo

For an image carousel use: <div id="owl-example" class="owl-carousel image-carousel">


Responsive carousel demo

More info and docs

For more information and demos see Owl Carousel 2.1