Owl carousel with navigation button and dots

index.html

<div class="discount_hotel">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="dis-hotel" class="owl-carousel owl-theme">
                    <div class="item">
                        <div class="offer_desc">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/22.jpg" alt="Owl Image">
                            <a href="#">Dhaka | Bangladesh | 0.00</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="offer_desc">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/22.jpg" alt="Owl Image">
                            <a href="#">Dhaka | Bangladesh | 0.00</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="offer_desc">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/22.jpg" alt="Owl Image">
                            <a href="#">Dhaka | Bangladesh | 0.00</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="offer_desc">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/22.jpg" alt="Owl Image">
                            <a href="#">Dhaka | Bangladesh | 0.00</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="offer_desc">
                            <img src="<?php echo get_template_directory_uri(); ?>/img/22.jpg" alt="Owl Image">
                            <a href="#">Dhaka | Bangladesh | 0.00</a>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

main.js

 $(document).ready(function() {
     
      $("#dis-hotel").owlCarousel({
     		dots: true,
     		navigation: true,
    		navigationText: [
		      "<i class='fa fa-angle-left'></i>",
		      "<i class='fa fa-angle-right'></i>"
		      ],


        autoPlay: 6000, //Set AutoPlay to 6 seconds
     
        items : 3,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],     
      });     
    });

style.css

#owl-demo .item{
  display: block;
  padding: 30px 0px;
  margin: 5px;
  color: #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.owl-theme .owl-controls .owl-buttons div {
  padding: 5px 9px;
}
.owl-theme .owl-buttons i{
  margin-top: 2px;
}
.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -45px;
  top: 55px; 
}
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: -45px;
  top: 55px;
}
/* discount hotel */
#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}
.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -45px;
  top: 55px; 
}
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: -45px;
  top: 55px;
}
.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}
.owl-theme .owl-controls .owl-page .active span{
	background: none repeat scroll 0 0 #000;
}
.owl-pagination{
	text-align: center;
}
.owl-prev i, .owl-next i {
    background: #333;
    padding: 6px 14px;
    color: #fff;
    font-size: 25px;
    border-radius: 57px;
}
.offer_desc{
  position: relative;
}
.offer_desc a{
    position: absolute;
    bottom: 30px;
    color: #fff;
    font-size: 25px;
    padding-left: 20px;
}