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

Question

[Denis_8106]

Редята, подскажите как сделать всплытие кнопки при использованиие слайдера Swipe, а именно:

<div class="wrapper">
  <div class="slider-cases">
    <div class="slider-wrap">

      <div class="slider-left">
        <div class="swiper is-content">

          <div role="list" class="swiper-wrapper is-content">
            <?php 
            $myitems_Query = new WP_Query('cat=5');
            while ( $myitems_Query->have_posts() ) : $myitems_Query->the_post(); ?>

            <div class="swiper-slide is-content">
              <p><?php the_title(); ?></p>
              <a href="<?php the_permalink() ?>" class="btn">
                <?php the_field('btn') ?>
              </a>
            </div>

            <?php endwhile; 
            wp_reset_postdata(); ?>
          </div>
        </div>

        <div class="arrows">
          <button class="arrow-button is--left w-inline-block">Prev</button>
          <button class="arrow-button is--right w-inline-block">Next</button>
        </div>

      </div>

      <div class="slider-right">
        <div class="swiper is-photos">
          <div role="list" class="swiper-wrapper is-photos">
            ...
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<style>
body .swiper-slide.is-photos {
  display: block !important;
}

</style>

<script>
let photoSwiper = new Swiper(".swiper.is-photos", {
  effect: "cards",
  grabCursor: true,
  speed: 0,
  loop: true,
  keyboard: true,
  // Navigation arrows
  navigation: {
    nextEl: ".arrow-button.is--right",
    prevEl: ".arrow-button.is--left"
  }
});

let contentSwiper = new Swiper(".swiper.is-content", {
  speed: 0,
  loop: true,
  followFinger: false,
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  }
});

photoSwiper.controller.control = contentSwiper;
contentSwiper.controller.control = photoSwiper;
</script>

Всё вроде работает синхронно левая и правая часть слайдера, но есть одно но, - в левой части есть кнопка (a, class="btn"), при нажатии на нее срабатывает слайдер - переход на следующий слайд. А я хочу, чтобы был переход по ссылке!!!
Как можно это сделать?

Answer 1

[Denis_8106]

Есть такое решение, не скажу что идеальное, но рабочее...
1) Добавляем в параметры allowTouchMove: false, (для contentSwiper), чтобы не было переключения при клике на левую часть слайдера.
2) Добавляем код ниже

const elemLink = document.querySelectorAll('.swiper-wrapper a.btn');
elemLink.forEach((el) => {
  el.addEventListener('click', function(event) {
    location.href = event.target.href;
  });
});