Search code examples
javascriptjquerycssjquery-pluginsowl-carousel

Is there a way to change the cursor of owl-carousel? (not owl-dots or owl-nav)


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>


Solution

  • 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.