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

Question

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>

Does this answer your question? [Using external images for CSS custom cursors](https://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors) — Sara Stoimenovska, Nov 05 '20 at 11:54

score 1 · Answer 1 · answered Nov 05 '20 at 11:54

Use this CSS

.carousel-wrapper {
    cursor: url(https://i.stack.imgur.com/VTE97.png),auto;
    overflow-x: hidden;
}

$(".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 {
cursor: url(https://i.stack.imgur.com/VTE97.png),auto;
overflow-x: hidden;
}

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

Thank you, but if I drug it, the custom cursor disappears, also it's working here but not in my browser, I don't know why. — Tanim, Nov 05 '20 at 12:10
You need to read this document https://www.w3.org/TR/CSS21/ui.html#propdef-cursor — Aman, Nov 05 '20 at 12:25

score 0 · Accepted Answer · answered Nov 13 '20 at 18:26

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.

score 0 · Answer 3 · answered Mar 24 '23 at 04:09

If that is related also to drag and drop cursors. You may want to modify the style of owl-carousel, specifically the .owl-drag and .owl-grab classes. Just make sure to add the parent <div> class⁠—e.g. parent-div before it to apply only the modification inside that parent <div>. It works for me.

.parent-div .owl-carousel.owl-theme.tour-packages-slider.owl-loaded.owl-drag {
    cursor: grab;
}

.parent-div .owl-carousel.owl-theme.tour-packages-slider.owl-loaded.owl-grab {
    cursor: grabbing;
}

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

3 Answers3