JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<!-- Swiper -->
<div class="container">
  <div class="swiper mySwiper">
  <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>
    <div class="swiper-slide">Slide 13</div>
    <div class="swiper-slide">Slide 14</div>
    <div class="swiper-slide">Slide 15</div>
     <div class="swiper-slide">Slide 16</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
  
  <div class="swiper mySwiper2">
  <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>
    <div class="swiper-slide">Slide 13</div>
    <div class="swiper-slide">Slide 14</div>
    <div class="swiper-slide">Slide 15</div>
     <div class="swiper-slide">Slide 16</div>
     <!-- <div class="swiper-slide">Slide 17</div> -->
     <!-- <div class="swiper-slide">Slide 18</div> -->
  </div>
  <div...

SCSS

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 30px;
  height: 100%;
}

.swiper {
  display: flex;
  width: 100%;
  /* height: 300px; */
  margin: 40px auto;
  // margin-right: auto;
}
.swiper-wrapper {
    height: 300px;
  }

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* height: calc((100% - 20px) / 2) !important; */

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.mySwiper2 {
  .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(9, 194px);
    column-gap: 30px;
    height: 300px;
    /* &::after {
      content: '';
      display: block;
      width: 194px;
      height: 100px;
    } */
  }
  .swiper-slide {
    height: auto !important;
    margin-top: 0 !important;
    /* width: 33.3333%; */
    /* width: auto !important; */
    &:nth-child(n + 1):nth-child(-n + 3),
     &:nth-child(n + 7):nth-child(-n + 9),
     &:nth-child(n + 13):nth-child(-n + 15),{
      background: red;
      grid-row: 1 / 2;
    }
    &:nth-child(n + 4):nth-child(-n + 6) {
      background: pink;
      grid-row: 2 / 3;
      
    }
    &:nth-child(n + 10):nth-child(-n + 12) {
      background: pink;
      grid-row: 2 / 3;
      
    }
    &:nth-child(n + 16):nth-child(-n + 18) {
      background: pink;
      grid-row: 2 / 3;
      
    }
    &:nth-child(1),
    &:nth-child(4){
      grid-column: 1 / 2;
    }
    &:nth-child(2),
    &:nth-child(5){
      grid-column: 2 / 3;
    }
    
    &:nth-child(3),
    &:nth-child(6){
      grid-column: 3 / 4;
    }
    &:nth-child(7),
    &:nth-child(10){
      grid-column: 4 / 5;
    }
    &:nth-child(8),
    &:nth-child(11){
      grid-column: 5 / 6;
    }
     &:nth-child(9),
    &:nth-child(12){
      grid-column: 6 / 7;
    }
    ...

JavaScript

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 3,
  slidesPerGroup: 3,
  grid: {
    rows: 2
  },
  spaceBetween: 30,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});

var swiper2 = new Swiper(".mySwiper2", {
  slidesPerView: 3,
  slidesPerGroup: 3,
  grid: {
    rows: 2, // 한 번에 2행 표시
    fill: 'row'
  },
  spaceBetween: 30,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
});