In my project i use vue-awesome-swiper and i need to make a custom animated cursor. My cursor code is here
window.addEventListener('mousemove', (e) => {
cursor.style = `top: ${e.clientY}px; left: ${e.clientX}px`;
if (e.target.closest('button') || e.target.closest('a')) {
cursor.classList.add('cursor_move')
} else {
cursor.classList.remove('cursor_move')
}
})
So i have block with the image on my layout and cursor: none. When i'm hovering a or button tag i put custom class on my element. But when i try to drag my swiper cursor doesn't move. I already tried to set drag or mousedown events but it was useless. Here is my swiper options
swiperOptions: {
slidesPerView: 'auto',
spaceBetween: 45,
loop: true,
grabCursor: true,
loopedSlides: 10,
modules: [Pagination, Autoplay],
pagination: {
el: '.merch-slider__pagination',
clickable: true,
type: "bullets",
bulletActiveClass: 'merch-slider__bullet_active',
bulletClass: 'merch-slider__bullet'
},
breakpoints: {
1400: {
slidesPerView: 'auto',
spaceBetween: 45
},
744: {
slidesPerView: 'auto',
spaceBetween: 20
}
}
Please help