텍스트 스와이프 (text swipe)

Swiper

텍스트 스와이프 (text swipe)

Kale_coding 2022. 4. 14. 14:56

<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,
  },
});

메뉴 부분 스와이프 구현

메뉴 클릭(탭) 시 해당 컨텐츠 출력