swiper 2개 연결해보기

main 스와이퍼, sub 스와이퍼 두개를 연결해서 한쪽의 슬라이드가 이동시, 다른 스와이퍼도 해당 페이지가 이동되게 구현하고 싶었다.

스와이퍼 구현은 swiper 홈페이지에서 확인가능하므로 여기서 생각하고, 바로 본론으로 들어가자.

두개의 스와이퍼 연결은 controller를 이용해 가능하다.

마지막줄이 서로 다른 두 스와이퍼를 등록해 주는 것이다.

        const mainSwiper = new Swiper(".main-swiper", {

            slidesPerView:1, 

            slidesPerGroup:1, 

            width: 330, 

            spaceBetween:35, 

            pagination: {

                el: ".swiper-pagination",

                clickable: true,

            },

        });

        const subSwiper = new Swiper(".sub-swiper", {

            slidesPerView:1,

            slidesPerGroup:1,

            effect: 'fade',

        });

        mainSwiper.controller.control = subSwiper; // mainSwiper, subSwiper 서로 연결함

        subSwiper.controller.control = mainSwiper; // mainSwiper, subSwiper 서로 연결함

controller 옵션을 Swiper 생성시 기재해주면 안되냐고 하시면, 안된다고 답해드림.

생성해야 swiper를 접근할 수 있음. 고로 생성해서 접근 가능한 주소가 생기면 이를 각각의 swiper에 등록하는 것임.