Integrating Owl Carousel in Webpages


Owl carousel is one of the widely used slider plugins by frontend developers. It's easy to integrate and supports images and texts along with it and is device responsive as well. Though it's most appropriate for e-commerce websites, we can also use it for blog sites as well.

	<div class="col-sm-12">
	<div class="customNavigation pull-right">
	<a class="btn prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
	<a class="btn next"><span class="glyphicon glyphicon-chevron-right"></span></a>
	</div>
	</div>

	<div class="col-sm-12">
	<div id="owl-carousel" class="owl-carousel owl-theme">
	<div>
	<div class="thumb">
	<a href="#"><img src="image1.png" alt=""></a>
	</div>
	<div class="text">
	<h3><a href="#">PHOTOSHOP</a></h3>                
	</div>
	</div>
	<div>
	<div class="thumb">
	<a href="#"><img src="image2.png" alt=""></a>
	</div>
	<div class="text">
	<h3><a href="#">HTML</a></h3>                
	</div>
	</div>
	</div>
	</div>	

Basically, what you need to do is add the customNavigation class for the div holding buttons while adding classes next and prev for the respective buttons. You need to add the owl-carousel id to call the js functions and owl-carousel and owl-theme classes for the divs holding corousel contents to add the pre-defined stylings. Then, you can segregate each of the carousel contents by wrapping them inside individual divs while segregating the contents too in separate divs would make it easier to add desired styles to them.

You can add as much contents as you want to create multiple carousel sides. You need to include the owl.carousel.js and owl.carousel.css file in your webpage. You also need to add another js file that defines the function of buttons as well as holds the key that defines desired number of carousel pieces to be displayed in various screen sizes. Here, we named it as functions.js.

Download Owl Carousel zip file from here.