텍스트 스와이프 (text swipe)
2022. 4. 14. 14:56ㆍSwiper
<head>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<!-- Swiper JS -->
<script defer src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head><div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide active" onclick="tab_menu(0)">명지병원</div>
<div class="swiper-slide" onclick="tab_menu(1)">서울헬스케어허브</div>
<div class="swiper-slide" onclick="tab_menu(2)">바른몸의원</div>
<div class="swiper-slide" onclick="tab_menu(3)">심포니셀의원</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class = "part0">
part0의 내용
</div>.mySwiper {
margin-bottom: 25px;
}
.swiper-slide {
background-color: pink;
text-align: center;
color: #fff;
padding: 14px 0;
border-radius: 15px;
}
.swiper-pagination {
display: none;
}// Section 08_partners(PC)
let tab = $('#partners .p_left ul').find('li');
function tab_menu(num){
for(let i=0;i<tab.length;i++){
if(num==i){
tab.eq(i).addClass('active');
$('.part'+i).show();
}else{
tab.eq(i).removeClass('active');
$('.part'+i).hide();
};
};
};
// Section 08_partners(tablet, mobile)
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2, // 보여질 슬라이드의 개수
spaceBetween: 17, // 슬라이드 사이의 여백
centeredSlides: false, // 중앙부터 시작 유무 (true일시 중앙부터)
autoHeight : true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});메뉴 부분 스와이프 구현
메뉴 클릭(탭) 시 해당 컨텐츠 출력
'Swiper' 카테고리의 다른 글
| swiper)pagination 2개 적용하기 (0) | 2022.05.18 |
|---|---|
| swiper bullet에 이미지 넣기 (0) | 2022.05.13 |
| swiper fade In 및 시간 차 효과 (0) | 2022.04.28 |
| swiper slide center (스와이퍼 컨텐츠 중앙정렬) (0) | 2022.04.15 |
| swiper) 화살표(next, prev), pagination(type:fraction) 커스텀 (0) | 2022.04.15 |