그누보드 QA - 점진적으로 줌인되는 이미지 슬라이더 관련 질문입니다.

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

붑후 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.05.25 11:07:37 949 (115.♡.♡.236)

답변 1

본문

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

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>