Integrating Owl Carousel in HTML

Owl carousel is one of the widely used slider plugins by frontend designers and developers. It's easy to integrate and supports images along with texts. Though it comes with a huge variety of options, the one we need is the responsive one. You can see owl carousels wildly used in e-commerce websites but we can also use it in blog sites as well. Here's a demo.

Master CSS Under 1 Hour

Master HTML In 1 Hour

Multilevel Drag And Drop Menu Sortable Menu In Laravel

Migrate Wordpress Website In 5 Easy Steps Under 10 minutes

Create Your Own News Portal In Wordpress In 30 Minutes

Photoshop Photo Manipulation Tutorial Step By Step

25 Color Grading And Color Correction Techniques In Photoshop | Webtrickshome

How to make an Animated GIF in Photoshop ?

Basically, what you need to do is add a wrapper with class owl-carousel owl-theme for the elements. Then, you can wrap each element inside a div as shown below.

<div class="owl-carousel owl-theme">
	<div>
		your element here ...
	</div>
	<div>
		your element here ...
	</div>
	<div>
		your element here ...
	</div>
</div>

Now, all you need to do is include the owl carousel js and css files in your webpage.

<script src="js/owl.carousel.js"></script>
<link rel="stylesheet" href="css/owl.carousel.css">

Finally, you need to initialize the owl carousel with a script where you can define the options for number of items you want to show in each screen size range, navigation elements, autoplay, margin between elements, loop, dots, etc as shown below.

<script>
$('.owl-carousel').owlCarousel({
	loop:true,
	margin:12,
	autoplay:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:4,
            nav:true,
            loop:false
        }
    }
})
</script>	

You can change the appearance of navigation elements and dots easily with css. However, the previous and next arrows are hardcoded in js file as html special characters. If you want to replace them with icons, you can search for Navigation.Defaults in your owl carousel js file and replace it with icons you like.

Download Owl Carousel zip file from here.

0 Like 0 Dislike 0 Comment Share Tweet