swiper 애니메이션이 2번 일어납니다 도와주세요! ㅠ
swiper slide 2개를 연동하여 밑에 스와이퍼에서 무한루프,자동재생을 주고 이미지가 활성화되었을때 커지고 비활성화일시 작아지는 애니메이션 효과를 넣었습니다. 근데 애니메이션이 원활하게 안돌아가요 ㅠ
예를들어 슬라이드가 총 3개라면 1 , 2, 3 까지는 잘 돌아가면서 애니메이션도 잘 되는데
다시 한번 돌아서 1번 슬라이드가 나올때 애니메이션이 반복이돼요! ㅠ 작아졌다 커지도록 한번만 되어야 하는데 두번 적용이 되는데 아무리 찾아봐도 해결방법을 모르겠습니다 도와주세요ㅠ
</strong></p>
<p><strong>.area_visual .swiper-slide img{transform:scale(0); opacity:0; }
.area_visual .swiper-slide-active img{transform:scale(1); opacity:1;}</strong></p>
<p><strong>
</strong></p>
<p> </p>
<p><strong>$(document).ready(function(){
var galleryTop = new Swiper('.area_visual .swiper01', {
spaceBetween: 10, //슬라이드 간격
effect:'fade',
autoplay: {
delay: 6000,
disableOnInteraction: false
},
speed: 1500,
loop: true,
loopedSlides: 1,
pagination: {
el: ".area_visual .swiper-pagination",
clickable: false,
renderBullet : function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
on: {
init: function () {
$(".area_visual .swiper-progress-bar").removeClass("animate");
$(".area_visual .swiper-progress-bar").removeClass("active");
$(".area_visual .swiper-progress-bar").eq(0).addClass("animate");
$(".area_visual .swiper-progress-bar").eq(0).addClass("active");
},
slideChangeTransitionStart: function () {
$(".area_visual .swiper-progress-bar").removeClass("animate");
$(".area_visual .swiper-progress-bar").removeClass("active");
$(".area_visual .swiper-progress-bar").eq(0).addClass("active");
},
slideChangeTransitionEnd: function () {
$(".area_visual .swiper-progress-bar").eq(0).addClass("animate");
}
},
});</strong></p>
<p><strong> var galleryThumbs = new Swiper('.area_visual .swiper02', {
spaceBetween: 0,
centeredSlides: true,
slidesPerView: 1,
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 1,
});</strong></p>
<p>
<strong> galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
swiper.on('slideChange', function (sld){
document.body.setAttribute('data-sld', sld.realIndex);
});
});</strong></p>
<p><strong>
답변 2개
작성해 주신 내용만으로 정확히 어떤 증상인지 감이 약간 안옵니다만,
에니메이션이 css의 transform scale 로 움직이는거라면 active 클래스가 한바퀴 다 돌아가고나면
없어지는것이 맞는지 이벤트 end 부분에서도 remove 해줘야 하는건 아닌지 한번 의심해봄직합니다.
댓글을 작성하려면 로그인이 필요합니다.
2개 슬라이드의 반복시점이나 스피드는 하나는 설정을 주셨고 하나는 default값이시네요. 그래서 다른 하나가 돌아갈때 css가 다시 먹히는게 아닌가 하는 의심을 해봅니다.
답변에 대한 댓글 5개
[code]
swiper.on('slideChange', function (sld){
document.body.setAttribute('data-sld', sld.realIndex);
});
[/code]
이 코드가 어떤 역할인지 모르겠는데 저거 주석처리한버너 해보시겠어요?
그리고 스피드나 루프타이머 같은 옵션 주고나서 콘솔에 에러는 없나요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인