swiper 애니메이션이 2번 일어납니다 도와주세요! ㅠ
본문
swiper slide 2개를 연동하여 밑에 스와이퍼에서 무한루프,자동재생을 주고 이미지가 활성화되었을때 커지고 비활성화일시 작아지는 애니메이션 효과를 넣었습니다. 근데 애니메이션이 원활하게 안돌아가요 ㅠ
예를들어 슬라이드가 총 3개라면 1 , 2, 3 까지는 잘 돌아가면서 애니메이션도 잘 되는데
다시 한번 돌아서 1번 슬라이드가 나올때 애니메이션이 반복이돼요! ㅠ 작아졌다 커지도록 한번만 되어야 하는데 두번 적용이 되는데 아무리 찾아봐도 해결방법을 모르겠습니다 도와주세요ㅠ
.area_visual .swiper-slide img{transform:scale(0); opacity:0; }
.area_visual .swiper-slide-active img{transform:scale(1); opacity:1;}
$(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");
}
},
});
var galleryThumbs = new Swiper('.area_visual .swiper02', {
spaceBetween: 0,
centeredSlides: true,
slidesPerView: 1,
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 1,
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
swiper.on('slideChange', function (sld){
document.body.setAttribute('data-sld', sld.realIndex);
});
});
답변 2
2개 슬라이드의 반복시점이나 스피드는 하나는 설정을 주셨고 하나는 default값이시네요. 그래서 다른 하나가 돌아갈때 css가 다시 먹히는게 아닌가 하는 의심을 해봅니다.
밑에도 위랑 같이 자동재생이랑 스피드 복붙하면 밑에 슬라이드 자체가 안돌아가더라구요 ㅠㅠ
아 혹시
swiper.on('slideChange', function (sld){
document.body.setAttribute('data-sld', sld.realIndex);
});
이 코드가 어떤 역할인지 모르겠는데 저거 주석처리한버너 해보시겠어요?
그리고 스피드나 루프타이머 같은 옵션 주고나서 콘솔에 에러는 없나요?
ㅠㅠ 주석처리하고 확인해봐도 똑같네용...ㅠ 에러도 딱히 없는 것 같은데 애니메이션 넣기 어렵네요... ㅠㅠ
개발자 도구에서 active클래스가 들어갔다 빠지는 순간을 좀 확인하면 좋을텐데요..
괜찮으시다면 링크를 남겨주시는것도 해결에 도움이 될수도 있습니다
작성해 주신 내용만으로 정확히 어떤 증상인지 감이 약간 안옵니다만,
에니메이션이 css의 transform scale 로 움직이는거라면 active 클래스가 한바퀴 다 돌아가고나면
없어지는것이 맞는지 이벤트 end 부분에서도 remove 해줘야 하는건 아닌지 한번 의심해봄직합니다.
답변을 작성하시기 전에 로그인 해주세요.