Hey there!

Carousels are one thing that attract a user's attention. On the same hand, they make the web page visually richer. Owl carousels are most widely and easy to use. Moreover, they are responsive. They do not need a customised CSS for that.

Owl carousel have a 'bulleted' navigation by default. We may want to customise this. Some might want an icon in its place, or simply 'Previous' and 'Next'.

The default navigation is shown below :

The no. of bullets increases as the screen size decreases.

Here, I will disable the default navigation.

A new class is added customNavigation. I am replacing the bullets with left and right icons. Style them with just standard CSS and place them accordingly.

HTML :

<div class="customNavigation">
    <a class="btn prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
    <a class="btn next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
</div>

<div class="row">
    <div id="owl" class="owl-carousel">
        <div class="owl-item"><img src="images/092.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/082.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/072.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/062.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/052.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/042.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/032.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/022.png" class="img-responsive"></div>
        <div class="owl-item"><img src="images/012.png" class="img-responsive"></div>
    </div>
</div>

CSS :

.owl-pagination{
        display: none;
}

.customNavigation a{
	color: #fff;
}

.customNavigation .btn{
	border-radius: 0;
	background-color: #7B797A;
	font-size: 13px;
	padding: 0 6px;
}

.owl-carousel .owl-item img{
	margin: 0 auto;
}

Javascript :

$(document).ready(function() {
     
      $("#owl").owlCarousel({
     
          autoPlay: 3000, //Set AutoPlay to 3 seconds
     
          items : 5,
          itemsDesktop : [1199,3],
          itemsDesktopSmall : [979,1]
     
      });

        var owl = $("#owl");
        owl.owlCarousel();

      //Custom Navigation Events
          $(".next").click(function(){
            owl.trigger('owl.next');
          })
          $(".prev").click(function(){
            owl.trigger('owl.prev');
          })
     
    });

OUTPUT :

Keep Coding!