swiper 애니메이션이 2번 일어납니다 도와주세요! ㅠ

swiper 애니메이션이 2번 일어납니다 도와주세요! ㅠ

QA

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);
    });

이 코드가 어떤 역할인지 모르겠는데 저거 주석처리한버너 해보시겠어요?
그리고 스피드나 루프타이머 같은 옵션 주고나서 콘솔에 에러는 없나요?

작성해 주신 내용만으로 정확히 어떤 증상인지 감이 약간 안옵니다만,

에니메이션이 css의 transform scale 로 움직이는거라면 active 클래스가 한바퀴 다 돌아가고나면

없어지는것이 맞는지 이벤트 end 부분에서도 remove 해줘야 하는건 아닌지 한번 의심해봄직합니다. 

답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT