Copy Below Code View As A Text File Show Text Only Show API Edit Code

                            
===== Code ==== 
export default function Home() {
  const ProductOptions={
    loop:true,
    margin:30,
	items:4,
	navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    nav:true,
	dots:false,
    responsive:{ 0:{items:1},560:{ items:2},767:{items:3},992:{items:4}
    }
  };
  const [options,setOptions]=useState(ProductOptions);

<OwlCarousel className='owl-theme' {...options}    >
   <div class="item"></div>
</OwlCarousel>

====================================


======= CSS =======

.owl-carousel .owl-nav button {
	background: #f6f6f6;
	height: 40px;
	left: -60px;
	line-height: 40px;
	opacity: 0;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease 0s;
	visibility: hidden;
	width: 40px;
}
.owl-carousel .owl-nav .owl-next {
	left: auto;
	right: -60px;
}
.owl-carousel:hover .owl-nav button {
	opacity: 1 !important;
	visibility: visible !important;
}
.owl-carousel:hover .owl-nav button span{
	font-size: 25px !important;
}
.owl-carousel .owl-nav button:hover {
	background: #EE3333 !important;
	color: #fff !important
}