<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 1</h1></div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 2</div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/">link</a><br>Slide 3</h1></div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 4</h1></div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 5</h1></div>
    </div>

    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

html, body {
      position: relative;
      height: 100%;
  overflow:hidden;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 500px;
      height: 500px;
      overflow: visible;

    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      height:auto;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

.swiper-slide .title {
 color:#ccc;
}
.swiper-slide-active .title {
 color:#000;
}
.swiper-pagination{
  margin:0 auto;
  left:0;
  right:0;
  margin-top:20px;
}
.swiper-pagination-bullet{
  margin:0 5px;
}

var s6 = new Swiper('.swiper-container', {
       //init: false,
       spaceBetween: 10,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
         clickable: true,
  }, 
});

const swiperSlides = document.getElementsByClassName('swiper-slide');

s6.on('slideChange', function() {
  const otherSlides = swiperSlides
  for (let index = 0; index < swiperSlides.length; index++) {
    const element = swiperSlides[index];
    element.getElementsByTagName('a')[0].style.display = 'none'
  }

  const linkElemCurrentSlide = swiperSlides[s6.realIndex].getElementsByTagName('a')
  linkElemCurrentSlide[0].style.display = 'block'
});


$('.swiper-slide a').on('click touchstart', function(e) {
 e.preventDefault();
});