퍼블리싱
플러그인
[Swiper] 두개의 슬라이드를 하나로 연결해야할때
- 지수
- 2023-02-27 15:06
위와 같은 디자인 작업시 반응형이나 슬라이드를 하나로 쓰지 못하는 경우, 두개의 스와이퍼를 연동해야할때가 있는데요!
컨트롤 버튼 하나로 두개를 연동해야할때 아래 코드 참고하시어 작성해주시면 연동됩니다 🙂
각 변수로 지정해주었던 슬라이드를 가져와 ".controller.control" swiper 메서드를 이용해서 서로 연결시켜주시면 됩니당~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const sliderOne = new Swiper(".slider-one", { // 이미지 swiper speed:800, autoplay:{ delay:2500, disableOnInteraction:false, }, loop:true, navigation:{ nextEl: ".swiper-button-prev", prevEl: ".swiper-button-next", }, }); const sliderTwo = new Swiper(".slider-two", { // 텍스트 swiper loop:true, }); /* 요기가 포인트! */ sliderOne.controller.control = sliderTwo; sliderTwo.controller.control = sliderOne; |
cs |
Share
열정 열정 열정!
전체 0