Как сделать смену слайдов при наведении?

Question

[AlexGlinskiy]

Есть карточка товара:

HTML

<div class="block-catalog">
	<a href="card.html" class="block-catalog__link">
		<div class="block-catalog__img">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="swiper-lazy-preloader"></div>
					<img data-src="./images/dest/card-2.jpg" src="./images/dest/load.svg" class="swiper-lazy" alt="">
				</div>
				<div class="swiper-slide">
					<div class="swiper-lazy-preloader"></div>
					<img data-src="./images/dest/card.jpg" src="./images/dest/load.svg" class="swiper-lazy" alt="">
				</div>
			</div>
			<div class="swiper-scrollbar"></div>
			<div class="swiper-pagination"></div>
		</div>
		<strong class="block-catalog__title">title</strong>
	</a>
	<p class="block-catalog__desc">description</p>
	<a href="/" class="block-catalog__btn">Подробнее</a>
</div>

SCSS

.block-catalog {
    &__link {
        color: $textcolor;
        text-decoration: none;
        transition: color .3s;

        &:hover {
            text-decoration: none;
            color: $primary;
        }
    }

    &__img {
        border-radius: 5px;
        overflow: hidden;
        text-align: center;
        background-color: #F8F8F8;
        margin-bottom: 20px;
        height: 240px;
        position: relative;

        img {
            max-width: 100%;
            width: auto;
            height: 100%;
        }

        .swiper-lazy-preloader {
            border-color: $primary-h;
            border-right-color: transparent;
        }

        .swiper-pagination {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            .swiper-pagination-bullet {
                margin: 0;
                flex: 1;
                height: 100%;
                border-radius: 0;
                background-color: transparent;
            }
        }

        .swiper-scrollbar {
            background: rgba(255, 255, 255, .5);
            bottom: 0;
            height: 2px;

            &-drag {
                background-color: $primary-h;
            }
        }
    }

    &__title {
        letter-spacing: 0.2px;
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 7px;
        display: block;
    }

    &__desc {
        letter-spacing: 0.2px;
        color: #9F9F9F !important;
        margin-bottom: 5px;
        font-weight: 300;
    }

    &__btn {
        color: $primary-2;
        text-decoration: underline;
        font-size: 13px;
        transition: color .3s;
    }
}

В карточке есть слайдер Swiper.js. Сейчас при наведении слайды меняются, но по клику на карточку не переходит на страницу:

JS

const blockCatalogImg = new Swiper(".block-catalog__img", {
      lazy: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      scrollbar: {
        el: ".swiper-scrollbar",
        hide: false,
      },
    });

    let thumbs = document.querySelectorAll('.block-catalog__img .swiper-pagination-bullet');
    thumbs.forEach(el => el.addEventListener('mouseenter', function() {
      $(this).trigger('click');
    }));

    //Переход по ссылке
    $('.block-catalog__img').on('click', function (){
      let url =  $(this).parents('a.block-catalog__link').attr('href');
      location.href = url;
    });

Как сделать, чтобы при наведении и слайды менялись и переходило по ссылке?

Comments

[Ilya Olovyannikov]

Там где-то в стилях у свайпера есть pointer-events: none;

[Froggyweb]

.block-catalog
&__link
display: block

но лучше бы сделать песочницу с проблемой в коде например в codepen.io

[AlexGlinskiy]

Froggyweb, https://codepen.io/psfjotsh-the-flexboxer/pen/jOLWaVE

[Froggyweb]

AlexGlinskiy, я бы отказался от пагинации, а делал смену слайда по API
ну или делать переход как у тебя в закомментированном участке, но там еще надо учитывать history api