이번에 점진적으로 이미지가 줌인되면서 다음 이미지로 슬라이드 되는 부분을 만들어보려고 합니다.
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개 / 댓글 1개
채택된 답변
+20 포인트
Feelz996
2022-05-25 (수) 14:02:55
.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 클래스가 자동으로 빠지니까 원래대로 돌아가구요.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.