오류 해결 기록

[라이브러리]Swiper - Thumbs gallery loop Thumbs click 버그

걍가영 2022. 8. 10. 22:46
Swiper 라이브러리 중 Thumbs 부분 클릭을 두번해야 동작하는 이슈가 있어서, 
문서중 하단 옵션을 추가하니까 정상적으로 되는걸 확인했다.



threshold

  • 임계값(px). "터치 거리"가 이 값보다 낮으면 스위퍼가 움직이지 않는다고 한다.
threshold: 9,

 

const about__advantage02__slides = new Swiper('.about__advantage02__slides', {
    slidesPerView: 5.5,
    spaceBetween: 10,
    freeMode: true,
    watchSlidesProgress: true,
    observer: true,
    observeParents: true,
    threshold: 9,
    breakpoints: {
        768: {
            slidesPerView: 9,
            spaceBetween: 20,
            loopFillGroupWithBlank: true,
            observer: true,
            observeParents: true,
        },
    },
});
const about__advantage02__mockups = new Swiper('.about__advantage02__mockups', {
    slidesPerView: 1,
    observer: true,
    observeParents: true,
    navigation: {
        nextEl: ".about__advantage02 .swiper-button-next",
        prevEl: ".about__advantage02 .swiper-button-prev",
        clickable: true,
    },
    thumbs: {
        swiper: about__advantage02__slides,
    },
});