How to get arrows appear on Owl Carousel only on hover

Owl carousel is widely used carousel in website design. Owl Carousel is one of the best choice of Web designer theses days. Owl carousel is the Touch enabled jQuery plugin which lets us create a beautiful responsive carousel slider (Slider). For many word press them owl carousel has been used. But the difficulty is that how to make arrows (navigation) only appear when you hover over the carousel. 

In this tutorial, we can learn how to get arrows appear on owl carousel only on hover and make arrow (navigation) disappear when no items left in either side.

Important: Please embed Jquery and owl carousel css and js in the project

Here is the code to get arrows appear on Owl Carousel only on hover

HTML

<div class="owl-carousel image-slider">

						  <div class="custom-card">
						  	<img src="assets/images/img1.jpg">
						  	<h3>This is the title</h3>
						  	<p>Content Goes Here</p>
						  </div>
						  <div class="custom-card">
						  	<img src="assets/images/img2.jpg">
						  	<h3>This is the title</h3>
						  	<p>Content Goes Here</p>
						  </div>
						  <div class="custom-card">
						  	<img src="assets/images/img3.jpg">
						  	<h3>This is the title</h3>
						  	<p>Content Goes Here</p>
						  </div>
						  <div class="custom-card">
						  	<img src="assets/images/img4.jpg">
						  	<h3>This is the title</h3>
						  	<p>Content Goes Here</p>
						  </div>

						</div>

Javascript

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        loop:false,
        margin:20,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })
});

CSS

.image-slider .owl-nav button{
	position: absolute;
	background: #61ce70 !important;
	height: 30%;
	width: 64px;
	font-size: 62px !important;
	color: #fff !important;
}
.image-slider .owl-nav .owl-prev{
	left: 0;
	top: 35%;
}
.image-slider .owl-nav .owl-next{
	right: 0;
	top: 35%;
}
/**** display on hover*****/
.image-slider .owl-nav{
	opacity: 0;
	transition: 0.5s all ease;
}

.image-slider:hover .owl-nav{
	opacity: 1;
	transition: 0.5s all ease;
}

.image-slider .owl-nav .disabled{
	opacity: 0;
	transition: 0.5s all ease;
}

For video tutorial: https://www.youtube.com/watch?v=b89fe1C_zwU&ab_channel=Decipher