프론트엔드/라이브러리3 Vue에서 Swiper 옵션 바인딩으로 정리하기 Vue에서 Swiper 옵션 바인딩으로 정리하기 https://swiperjs.com/demos#autoplay Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper 공식 사이트의 demos를 보면 옵션들을 태그 안에다가 덕지덕지 끼워넣는 모습을 볼 수 있습니다. 그런데 옵션이 많아지다보면 코드가 매우 길어지고, 같은 옵션을 다른 슬라이드에 적용할 때도 중복이 발생하여 불편합니다. Slide 1 Slide 2 Slide 3 Vue에서는 이 긴 옵션들을 바인딩하여 코드의 가독성을 높히고, 더 .. 2022. 2. 6. Vue3에서 swiper 쓰는법 (오류 해결법) Vue3에서 swiper 사용법 (오류 해결법) swiper는 슬라이드를 만들때 사용하는 라이브러리로 많은 사랑을 받고 있습니다. 대부분의 사이트에서 슬라이드를 구현할 때 스와이퍼를 사용하죠. swiper의 공식 사이트에 가보면 기본 js 뿐만아니라 react, angular, vue의 demo 코드도 제공하기 때문에 초심자들도 따라 배우기가 쉽습니다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 문제 그런데 공식 사이트에서 제공하는 demo 코드.. 2022. 2. 5. Swiper 양쪽 끝에서 드래그시 밀림 막기 Swiper 양쪽 끝에서 드래그시 밀림 막기 swiper를 사용하다보면 맨 왼쪽이나 맨 오른쪽 슬라이드에서 드래그 시 슬라이드가 살짝 밀리는 모습을 볼 수 있습니다. 경우에 따라 이게 많이 거슬리는 경우가 있는데, 이 현상을 막을 수 있는 스와이퍼 옵션이 있습니다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com swiper api를 보시면 resistanceRatio라는 옵션이 있는데, 이 옵션을 사용하면 양쪽 끝에서 밀리는 정도를 조절할 수 .. 2022. 1. 30. 이전 1 다음
