swiper 애니메이션이 2번 일어납니다 도와주세요! ㅠ
swiper slide 2개를 연동하여 밑에 스와이퍼에서 무한루프,자동재생을 주고 이미지가 활성화되었을때 커지고 비활성화일시 작아지는 애니메이션 효과를 넣었습니다. 근데 애니메이션이 원활하게 안돌아가요 ㅠ
예를들어 슬라이드가 총 3개라면 1 , 2, 3 까지는 잘 돌아가면서 애니메이션도 잘 되는데
다시 한번 돌아서 1번 슬라이드가 나올때 애니메이션이 반복이돼요! ㅠ 작아졌다 커지도록 한번만 되어야 하는데 두번 적용이 되는데 아무리 찾아봐도 해결방법을 모르겠습니다 도와주세요ㅠ
Copy
.area_visual .swiper-slide img{transform:scale(0); opacity:0; }
.area_visual .swiper-slide-active img{transform:scale(1); opacity:1;}
Copy
$(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개 / 댓글 5개
2개 슬라이드의 반복시점이나 스피드는 하나는 설정을 주셨고 하나는 default값이시네요. 그래서 다른 하나가 돌아갈때 css가 다시 먹히는게 아닌가 하는 의심을 해봅니다.
답변에 대한 댓글 5개
답변을 작성하려면 로그인이 필요합니다.