swiper slider text fadein 효과

See the Pen swiper text fadein by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<div class="slider_wrap">
  <div class="swiper_control">
    <button class="btn_prev">이전</button>
    <button class="btn_next">다음</button>
  </div>

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">
        <div>
          <b>1슬라이드 타이틀 텍스트</b>
          <p>슬라이드 서브 텍스트</p>
          <a href="#">버튼</a>
        </div>
      </div>
      <div class="swiper-slide slide2">
        <div>
          <b>2슬라이드 타이틀 텍스트</b>
          <p>슬라이드 서브 텍스트</p>
          <a href="#">버튼</a>
        </div>
      </div>
      <div class="swiper-slide slide3">
        <div>
          <b>3슬라이드 타이틀 텍스트</b>
          <p>슬라이드 서브 텍스트</p>
          <a href="#">버튼</a>
        </div>
      </div>
    </div>
  </div>
</div>

 

css

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

.slider_wrap{width:600px; height:300px; margin:0 auto; position: relative;}
.swiper-container{ overflow:hidden; height:300px;}
.swiper-slide{width:600px; height:300px; box-sizing:border-box; padding: 0 50px; display: flex !important; align-items: center;}
.swiper-slide.slide1 {background: rgb(239,146,128);}
.swiper-slide.slide2 {background: rgb(90,207,172);}
.swiper-slide.slide3 {background: rgb(113,179,232);}

.swiper_control button{display: block; width: 38px; height: 38px; border: 0; font-size: 0; position: absolute; z-index: 99; top: 50%; margin-top: -19px; cursor: pointer;}
.swiper_control .btn_prev{background: url(https://umings.github.io/images/btn_slide_prev.png) no-repeat center; left: -19px;}
.swiper_control .btn_next{background: url(https://umings.github.io/images/btn_slide_next.png) no-repeat center; right: -19px;}

.swiper-slide b, .swiper-slide p, .swiper-slide a{position:relative; bottom:-10px; transition: all 0.5s; opacity:0; font-family: 'pretendard';}
.swiper-slide b{font-size:23px;}
.swiper-slide p{font-size:15px;}
.swiper-slide a{display:inline-block; width:70px; height:30px; border:1px solid #000; text-align:center; line-height:30px; text-decoration:none; color:#000; background:#fff; font-size:14px;}
.swiper-slide-active b, .swiper-slide-duplicate-active b, .swiper-slide-active p, .swiper-slide-duplicate-active p, .swiper-slide-active a, .swiper-slide-duplicate-active a {opacity: 1; bottom: 0px; transition-delay: 0.2s;}
.swiper-slide-active p, .swiper-slide-duplicate-active p {transition-delay: 0.4s;}
.swiper-slide-active a, .swiper-slide-duplicate-active a {transition-delay: 0.6s;}

 

js

var Slier = new Swiper('.swiper-container', {
  effect : 'fade',
  navigation: {
  nextEl: '.btn_next',
  prevEl: '.btn_prev',
  },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  },
  loop: true,
  observer: true,
  observeParents: true,
  speed: 500
});