JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swipe/2.0.0/swipe.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
    <div class="swiper-slide">Slide 11</div>
    <div class="swiper-slide">Slide 12</div>
    <!-- ... more slides ... -->
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

SCSS

.swiper {
  width: 100%;
  height: auto;
  margin: 20px auto;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  height: 150px;
  background: #f1f1f1;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

JavaScript

const swiper = new Swiper('.swiper', {
  slidesPerView: 4, // 한 행에 4개의 슬라이드
  grid: {
    rows: 2,
    fill: 'row' // 가로 방향으로 채우기
  },
  spaceBetween: 10, // 슬라이드 간 가로 간격
  slidesPerGroup: 8, // 8개씩 이동 (4x2 그룹)
  
  // 페이지네이션
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  },
  
  // 네비게이션 버튼
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  // 반응형 설정
  breakpoints: {
    // 모바일
    320: {
      slidesPerView: 2,
      grid: {
        rows: 2
      },
      slidesPerGroup: 4
    },
    // 태블릿
    768: {
      slidesPerView: 3,
      grid: {
        rows: 2
      },
      slidesPerGroup: 6
    },
    // 데스크탑
    1024: {
      slidesPerView: 4,
      grid: {
        rows: 2
      },
      slidesPerGroup: 8
    }
  },
  
  // 추가 옵션
  grabCursor: true,
  keyboard: {
    enabled: true,
  },
  
  on: {
    // 슬라이드 변경 시 그리드 레이아웃 유지
    beforeInit: function () {
      this.grid = {
        rows: 2,
        fill: 'row'
      };
    }
  }
});