vue-slick-carousel - how to disable click of prev/next arrow button

Question

I am following this library for making slick.

This is my current layout

I want to disable the click methods for arrow-left and arrow-right button, while keeping the arrow here, so that it will not change slide or anything. How to do it?

Codesandbox:
https://codesandbox.io/s/naughty-matan-55c76?file=/src/components/HelloWorld.vue

Answer 1

You can add @click.stop to stop event propagation. See more about Event Modifiers.

<VueSlickCarousel>
  ...
  <template #prevArrow>
    <button class="arrow-btn">
      <img
        src="@/assets/images/common/arrow-right.svg"
        alt="arrow-left"
        @click.stop>
    </button>
  </template>
  <template #nextArrow>
    <button class="arrow-btn">
      <img
        src="@/assets/images/common/arrow-right.svg"
        alt="arrow-left"
        @click.stop>
    </button>
  </template>
</VueSlickCarousel>

Updates

To disable click event from button (not only from img). You can do it with css:

.arrow-btn {
  pointer-events: none;

  img {
    pointer-events: all;
  }
}

But why not we just add @click.stop to button instead of img?

The problem is here:

...

arrow = this.prevArrow ? (
  this.prevArrow(option)[0]
) : (
  <button type="button" data-role="none" style="display: block;">
    Next
  </button>
)
...

mergeVNodeData(arrow, 'on', {
  click: () => {
   if (clickable) {
     this.$emit('arrowClicked', { message: this.type })
   }
  },
})

First it checks if you have passed the prevArrow slot, if so they will use your slot. If not, they will use the default button.

And either way, they will combine their default props/event handlers which include the 'click' event, meaning that your click will only be overridden.