how to use owl carousel

If you look at today’s blog websites, you may notice a trend in design and development. In these days, blog owners love to have a carousel for featured posts on their blog home page. A carousel draws the attention of readers to the blog posts selected by the owner and allows the visitors to glance quickly through some of the best posts. It is a smart and ovation way to promote the blog.

1. Load jQuery and include Owl Carousel plugin files

To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

<!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> 
  <!-- Default Theme --> <link rel="stylesheet" href="owl.theme.css">  
 <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"></script> 
  <!-- Include js plugin --> <script src="owl.carousel.js"></script>

2. Set up your HTML

You don’t need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class=”owl-carousel”>. Class “owl-carousel” is mandatory to apply proper styles that come from owl.carousel.css file.

<div id="owl-example" 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>

 

3. Call the plugin

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

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

 

Live Example:

admin
Leave a Reply

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages