점진적으로 줌인되는 이미지 슬라이더 관련 질문입니다.

점진적으로 줌인되는 이미지 슬라이더 관련 질문입니다.

QA

점진적으로 줌인되는 이미지 슬라이더 관련 질문입니다.

본문

이번에 점진적으로 이미지가 줌인되면서 다음 이미지로 슬라이드 되는 부분을 만들어보려고 합니다.

1부터 3번 이미지가 있을경우

1번 이 줌인 되다가 2번으로 넘어가서 2번 이미지가 줌인, 3번으로 넘어가서 3번이미지 줌인 다시 1번으로 돌아가서 반복되는 줌인, 슬라이더 를 생각하고 있는데요.

작업하다보니까 줌인이 되긴하는데 다음 이미지로 넘어가도 잘 안넘어가고 첫번째와 두번째 이미지가 겹쳐서 출력이되며 다음 이미지로 슬라이드가 되면 그전 슬라이더의 일부분이 보입니다,.또한 줌아웃까지 진행이되는데 줌 아웃을 없앨방법과 문제 해결 방법이 있을까요?

해당 코드입니다.

<style>
  .swiper-slide{height: 100%;
  width: 100%;
    position:fixed;
    top: 0px;
    left: 0px;
  overflow: hidden;
  animation: swiper-slide-animation 10s linear infinite 0s;;

  }

/*.bg-slide{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
}*/
  .swiper-slide img{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    opacity: 1;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-animation: swiper-slide-animation 30s linear infinite 0s;
    animation: swiper-slide-animation 30s linear infinite 0s;
  }
  .banner{
    background-image: url('<?php echo G5_THEME_IMG_URL ?>/slide_img_j_1.png');
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
  }
  .banner2{
 /* background-image: url("/theme/aidd2/img/slide_img_j_2.png");*/
  background-image: url('<?php echo G5_THEME_IMG_URL ?>/slide_img_j_2.png');
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
  }
  @-webkit-keyframes swiper-slide-animation {
    0% {
      -webkit-animation-timing-function: ease-in;
      opacity: 0;
    }
    10%{
      -webkit-transform: scale(1.1);
      -webkit-animation-timing-function: ease-out;
      opacity: 1;
    }
    30%{
      -webkit-transform: scale(1.3);
      opacity: 1;
    }
    50%{
      -webkit-transform: scale(1.3);
      opacity: 1;
    }
    100%{opacity:1}
  }
  @keyframes swiper-slide-animation {
    0% {
      animation-timing-function: ease-in;
      opacity: 1;
    }
    10%{
      transform:  scale(1.1);
      animation-timing-function: ease-out;
      opacity: 1;
    }
    30%{
      transform: scale(1.3);
      opacity: 1;
    }
    50%{
      transform: scale(1.3);
      opacity: 1;
    }
    100%{
      opacity: 1;
    }
  }



</style>
<body>
<div class="swiper-container" style="width: 100%; height: 517px; min-width:500px; overflow: hidden">
  <div class="swiper-wrapper" style="width: 3600px; height: 517px;">
    <div class="swiper-slide" style="width: 100%; height: 100%;">
      <img class="banner">
    </div>
    <!-- 슬라이드 메뉴-->
    <div class="swiper-slide" style="width: 100%; height: 100%;">
      <img class="banner2">
    </div>

    <!-- <div class="swiper-slide" style="width: 100%; height: 100%;">
       <img src="<?php echo G5_THEME_IMG_URL ?>/slide_img_2.png" alt="슬라이드3" style="width: 100%; height: 100%;">
     </div>-->
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination" style="width: 100%; top: 90%;"></div>

  <!-- If we need navigation buttons -->

  <div class="swiper-button-prev" style="left: 10%; "></div>
  <div class="swiper-button-next" style="right:10%; "></div>

</div>

<!--<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>-->
<script src="<?php echo G5_THEME_JS_URL ?>/swiper.js"></script>
<script type="text/javascript">
  var mySwiper = new Swiper('.swiper-container', {
// 슬라이드를 버튼으로 움직일 수 있습니다.
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

// 현재 페이지를 나타내는 점이 생깁니다. 클릭하면 이동합니다.
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },

// 3초마다 자동으로 슬라이드가 넘어갑니다. 1초 = 1000
    autoplay: {
      delay: 3000,
    },
  });
</script>
</body>
</html>

이 질문에 댓글 쓰기 :

답변 1

.swiper-wrapper .swiper-slide.swiper-slide-active img{

    -webkit-animation: swiper-slide-animation 30s linear infinite 0s;
    animation: swiper-slide-animation 30s linear infinite 0s;

}

 

이렇게 하시면 될듯하네요. 기존에 .swiper-slide와, .swiper-slide img에 애니메이션 걸려있던

부분들은 빼시구요. 이렇게 하면 슬라이드가 돌아가면서 활성화 된곳의 이미지만 애니메이션이

걸릴거에요. 슬라이드가 넘어가면 swiper-slide-active 클래스가 자동으로 빠지니까 원래대로 돌아가구요. 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,122 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT