Puede agregar @click.stop para detener la propagación de eventos. Ver más sobre Modificadores de eventos .

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

Actualizaciones

Para deshabilitar el evento de clic desde el botón (no solo desde img). Puedes hacerlo con css:

 .arrow-btn { pointer-events: none; img { pointer-events: all; } }

Pero, ¿por qué no simplemente agregamos @click.stop al botón en lugar de img?

El problema está aquí :

 ... 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 }) } }, })

Primero verifica si ha pasado la ranura prevArrow, si es así, usarán su ranura. Si no, usarán el botón predeterminado.

Y de cualquier manera, combinarán sus accesorios/controladores de eventos predeterminados que incluyen el evento 'clic', lo que significa que su clic solo se anulará.