При скролле слайдера я перехожу на подстраницу сайта

у меня есть слайдер, он состоит из картинок и каждая картинка имеет свою ссылку на продукт, проблема заключается в том, что я при прокрутке слайдера перехожу на эту ссылку, а хотелось бы переходить на ссылку только при нажатии на картинку. Как можно решить данную проблему?

HTML

<main class="js--main">
  <div class="slider__box">     
    <?
    $args = array(
      'numberposts' => 10,
      'order' => 'ASC'
    );     
    $latest_posts = get_posts($args);
    foreach ($latest_posts as $key => $row) {
      $thumbnail = get_the_post_thumbnail_url($row->ID,'large');
      $get_permalink = get_permalink($row->ID);
     ?>    
     <div class="slider__content">
        <div class="images__slider">
           <div class="swiper-slide-inside">
              <div class="swiper-slide-inside-top">
                 <div class="swiper-slide-inside-top__imageContainer">
                    <span class="imageInside">
                    <span class="imageInside__image">


                    <a class="image__link" href="<? echo $get_permalink; ?>">
                    <span class="deoratorOnHover">zobacz</span>
                    <img src="<? echo $thumbnail; ?>" alt="<? echo $attachments->post_title; ?>">
                    </a>
                        
                        
                    </span>
                    </span>      
                    <img src="<? echo get_template_directory_uri(); ?>/assets/images/news-placeholder.png" alt="" class="swiper-slide-inside-top__image">                    
                 </div>
              </div>
              <div class="swiper-slide-inside-bottom">
                 <a href="<? echo $get_permalink; ?>">
                 <span class="swiper-slide-inside-bottom__title">
                  <? echo $row->post_title; ?>
                 </span>
                 <span class="swiper-slide-inside-bottom__description">
                  <? echo $row->post_excerpt; ?>
                 </span>
                 </a>
              </div>
           </div>
        </div>
     </div>
  <?  } ?>
  </div>

Jquery

$('.slider__box').slick({
  dots: false,
  infinite: false,
  arrows: false,
  slidesToShow: 3,
slidesToScroll: 3,
  centerMode: false,
  variableWidth: true,
    responsive: [
        {
  breakpoint: 1600,
  settings: {
    slidesToShow: 3,
      slidesToScroll: 3,
      variableWidth: false
  }
},
{
  breakpoint: 1200,
  settings: {
    slidesToShow: 2,
      slidesToScroll: 2,
      variableWidth: true
      
  }
}
        ,
{
  breakpoint: 700,
  settings: {
    slidesToShow: 1,
      slidesToScroll: 1,
      variableWidth: true
  }
}

]});


Ответы (0 шт):