Skip to main content Skip to navigation

Department of Economics

Owl Carousel

Pre-requisites

These need to be included in the <head>.

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

<script type="text/javascript" src="/fac/soc/economics/apps/plugins/owl-carousel/owl.carousel.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({
 navigation : true,
 slideSpeed : 300,
 paginationSpeed : 400,
 singleItem:true 
 });
 
});

Demos

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