728x90
반응형
슬라이드를 구현할 때 공수를 줄여주는 매우 고마운 swiper!!
사진 갤러리(?) 와 같이 2개의 슬라이더가 같이 동작하도록 구현해야 할 때가 있는데요,
그런 경우를 위해 아래 방법으로 swiper 2개 혹은 n개를 연동하여 A슬라이더와 B슬라이더가
서로를 제어하도록 구현하시면 되겠습니다!!
HTML 야무지게 작성하고,
<div class="A_swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">A-1</div>
<div class="swiper-slide">A-2</div>
<div class="swiper-slide">A-3</div>
<div class="swiper-slide">A-4</div>
<div class="swiper-slide">A-5</div>
<div class="swiper-slide">A-6</div>
</div>
<div class="A_nav">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="B_swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">B-1</div>
<div class="swiper-slide">B-2</div>
<div class="swiper-slide">B-3</div>
<div class="swiper-slide">B-4</div>
<div class="swiper-slide">B-5</div>
<div class="swiper-slide">B-6</div>
</div>
<div class="B_nav">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
css 필요한 거 쏙쏙 넣고 (swiper.css 필수!)
.swiper-container {
width: 600px;
text-align: center;
}
.swiper-container .swiper-wrapper {
display:flex;
}
.swiper-container .swiper-slide {
flex-shrink:0;
width: 100%;
background:#e9e9e9;
aspect-ratio:16/9;
box-sizing:border-box;
}
.swiper-container .swiper-slide.swiper-slide-active{border: 1px solid green;}
.B_swiper{margin-top:20px;}
.B_swiper .swiper-container
// 각 슬라이드 속성 적용
var A_Swiper = new Swiper('.A_swiper .swiper-container', {
centeredSlides:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
});
// 각 슬라이드 속성 적용
var B_Swiper = new Swiper('.B_swiper .swiper-container', {
centeredSlides:true,
slidesPerView: 3,
spaceBetween: 15,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
});
// 연동과 제어
A_Swiper.controller.control = B_Swiper;
B_Swiper.controller.control = A_Swiper;
완성 되었습니다!!ㅎㅎㅎㅎ
controller 파라미터를 이용하면 아주 간단하게 연동됩니다.
각 슬라이드의 slidePevView(보여지는 슬라이드)의 수가 동일하던 동일하지 않던 연동과 제어에는 문제 없습니다!!
See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.
알아두면 매우 유용할 거 같은 swiper 연동!! 이상입니다.
글 읽어주셔서 감사합니다!
728x90
'Javascript' 카테고리의 다른 글
[Javascript] 버튼 클릭 한번으로 모든 체크 박스 체크 해제하기 (4) | 2023.03.07 |
---|---|
[Javascript] 특정 영역을 제외한 곳 클릭시 이벤트 실행하기 (feat. e.target) (0) | 2023.03.06 |
[javascript] PIP기능을 구현해보자!(쉬움주의) (4) | 2023.02.22 |
[javascript] 요소 클릭 시 텍스트 input value값으로 넣기(예시 : 배송시 요청 사항을 선택해주세요.) (0) | 2023.02.09 |
[javascript] 스크롤 애니메이션 new IntersectionObserver() (0) | 2023.02.01 |