I have been trying to change the cursor to an image when the mouse enters the owl-carousel but failed, maybe it's because I am not good at javascript/jQuery, so I tried CSS, I tried to change the cursor for .owl-carousel
class, then .owl-stage-outer
, .owl-stage
& .owl-item
, but didn't work, then I wrapped the entire carousel with another div
and tried to change its cursor on hover, but that also didn't work.
I have tried CSS cursor: url(https://i.imgur.com/ZUjicmP.png), auto;
but didn't work, and searched not only in stackoverflow, but also everywhere possible from google.
I attached what I have tried in a snippet below, please help, thanks in advance.
$(".owl-carousel").owlCarousel();
.item {
display: flex;
justify-content: center;
align-items: center;
background: #000;
margin: 15px;
color: #fff;
height: 150px;
}
/*.owl-carousel {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-stage-outer {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-stage {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
/*.owl-item {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}*/
.carousel-wrapper:hover {cursor: url(https://i.imgur.com/ZUjicmP.png), auto;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="carousel-wrapper">
<div class="owl-carousel">
<div class="item">0-1</div>
<div class="item">0-2</div>
<div class="item">0-3</div>
<div class="item">0-4</div>
<div class="item">0-5</div>
<div class="item">0-6</div>
</div>
</div>
I have been searching for the reason why it's not working, and finally, I got it, and it's working fine now. The image size was the reason, according to THIS ARTICLE of MDN Web Docs-
the limit of the cursor size is 128×128px. Larger cursor images are ignored.
I found this article on this StackOverflow page, and later I saw another page with the same solution. Thanks to all.