<!-- Swiper -->
  <div class="swiper-container">
    
    <div class="swiper-wrapper">
      <div class="swiper-slide card"><p class="textblock">Slider 1</p></div>
      <div class="swiper-slide card"><p class="textblock">Slider 2</p></div>
      <div class="swiper-slide card"><p class="textblock">Slider 3</p></div>
      
    </div>
    
    <button class="swiper-button-prev" onclick='myFunct()'></button>
    <button class="swiper-button-next" onclick='myFunct()'></button>
  </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: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff !important;

      /* 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;
    }
    .card{
      width: 100%;
    }
.text-block{
  color:#000;
  
}        
.card {
  width: 100%;
}

.card p {
  color: #00000000;
}

.slide-active p{
  color: #00000099;
  animation: shadow  5s forwards ease-in;

}


@keyframes shadow {
  from { color: #00000000;}
  20% { color: #00000000;}
  to {color: #00000099;}
}

let isVertical = true,
  direction = 'vertical';
let swiper = initSwiper(direction);

function initSwiper(direction) {
  return new Swiper('.swiper-container', {
    // spaceBetween: 50,
    speed:5000,
    slidesPerView: 'auto',
      effect: 'cube',
      arrows: 'true',
      grabCursor: true,
      cubeEffect: {
        shadow: false,
        slideShadows: false,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    autoplay: {
     delay: 1000,
    },
    loop: true,
    direction: direction,
    slideActiveClass: `slide-active`,
  
    
  });
  
}

function changeDirection() {
  isVertical = !isVertical;
  direction = isVertical ? 'vertical' : 'horizontal';
  swiper.changeDirection(direction);
}

let num = 0;

swiper.on('slideChange', function () {

  if($('.swiper-slide').data('swiper-slide-index') == 1){
   alert(1);
     $('.textblock').addClass('opac');
  }
  if($('.swiper-slide').data('swiper-slide-index') == 0 || $('.swiper-slide').data('swiper-slide-index') == 2){
   
   $('.textblock').removeClass('opac');
}



    num += 1;
  if(num == 4){
    changeDirection();
    num = 0;
    }
  });