점진적으로 줌인되는 이미지 슬라이더 관련 질문입니다.
본문
이번에 점진적으로 이미지가 줌인되면서 다음 이미지로 슬라이드 되는 부분을 만들어보려고 합니다.
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 클래스가 자동으로 빠지니까 원래대로 돌아가구요.
답변을 작성하시기 전에 로그인 해주세요.