점진적으로 줌인되는 이미지 슬라이더 관련 질문입니다. 채택완료

붑후 3년 전 조회 1,831

이번에 점진적으로 이미지가 줌인되면서 다음 이미지로 슬라이드 되는 부분을 만들어보려고 합니다.

1부터 3번 이미지가 있을경우

1번 이 줌인 되다가 2번으로 넘어가서 2번 이미지가 줌인, 3번으로 넘어가서 3번이미지 줌인 다시 1번으로 돌아가서 반복되는 줌인, 슬라이더 를 생각하고 있는데요.

작업하다보니까 줌인이 되긴하는데 다음 이미지로 넘어가도 잘 안넘어가고 첫번째와 두번째 이미지가 겹쳐서 출력이되며 다음 이미지로 슬라이드가 되면 그전 슬라이더의 일부분이 보입니다,.또한 줌아웃까지 진행이되는데 줌 아웃을 없앨방법과 문제 해결 방법이 있을까요?

해당 코드입니다.




  
    
      
    
    
    
      
    

    
  
  
  

  

  
  



" target="_blank" rel="noopener noreferrer">https://unpkg.com/swiper/swiper-bundle.min.js">-->

#그누보드5

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

Feelz996

3년 전

.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개

�

붑후

3년 전

감사합니다 썽피리님 덕분에 해결하였습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

점진적으로 줌인되는 이미지 슬라이더 관련 질문입니다. 채택완료

답변 1개

답변에 대한 댓글 1개

공유하기