swiper slider with background scale animation

배경화면이 scale 되는 swiper slider

 

See the Pen swiper slide with background and text animation 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

.slider_wrap{width:800px; height:500px; margin:0 auto; position: relative;}
.swiper-container{ overflow:hidden; height:500px;}
.swiper-slide{width:800px; height:500px; box-sizing:border-box; padding: 0 50px; display: flex !important; align-items: center; position:relative;}
.swiper-slide::before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; }
.swiper-slide.slide1::before {background: url(https://umings.github.io/images/bg_animal1.jpg) no-repeat center / cover;}
.swiper-slide.slide2::before {background: url(https://umings.github.io/images/bg_animal2.jpg) no-repeat center / cover;}
.swiper-slide.slide3::before {background: url(https://umings.github.io/images/bg_animal3.jpg) no-repeat center / cover;}
.swiper-slide::after{content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.6); position:absolute; left:0; top:0; z-index:0;}
.swiper-slide.bganimation::before{animation: bganimation 7s;}

.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'; z-index:99; color:#fff;}
.swiper-slide b{font-size:23px;}
.swiper-slide p{font-size:15px;}
.swiper-slide a{display:inline-block; width:70px; height:30px; 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;}
@keyframes bganimation{
  0% {transform:scale(1)}
  100% {transform:scale(1.2)}
}

 

js *jquery 필요

  var Slier = new Swiper('.swiper-container', {
  effect : 'fade',
  navigation: {
  nextEl: '.btn_next',
  prevEl: '.btn_prev',
  },
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  loop: true,
  observer: true,
  observeParents: true,
  speed: 500,
    on: {
      afterInit : function() {
       $(".swiper-slide-active").addClass("bganimation")
      },
      activeIndexChange: function () {
      setTimeout(function(){
        $(".swiper-slide:not(.swiper-slide-active)").removeClass("bganimation")
      },500)//anmation이 급격하게 멈춰서 slide가 fade될때 확 바뀌어 보이는걸 방지하기 위해 settimeout 후 나머지 슬라이드에서 class 제거
      $(".swiper-slide").addClass("bganimation") 
    }
    },
});