WebPublisher/JavaScript & jQuery

[swiper] grid 레이아웃 스와이퍼

amanda 2025. 6. 19. 17:41

https://codepen.io/jimmybreeze/pen/VwXZReJ

 

Swiper Grid

...

codepen.io

 

slidesPerColumn, slidesPerGroup 활용해서 grid swiper 만들기

 

<div class="swiper-container">
  <div class="swiper-wrapper grid-container">
    <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 class="swiper-slide">Slide 19</div>
    <div class="swiper-slide">Slide 20</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100px;
  width:100%;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
const mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    slidesPerColumn: 3,
    slidesPerGroup :3,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    on: {
      init: function () {},
      orientationchange: function(){},
      beforeResize: function(){
        let vw = window.innerWidth;
        if(vw > 1000){
          mySwiper.params.slidesPerView = 3
            mySwiper.params.slidesPerColumn = 3
            mySwiper.params.slidesPerGroup = 3;
        } else {
          mySwiper.params.slidesPerView = 4
            mySwiper.params.slidesPerColumn = 2
            mySwiper.params.slidesPerGroup =4;
        }
        mySwiper.init();
      },
    },
});

 

 

https://stackoverflow.com/questions/72059580/swiper-grid-module-is-not-working-as-expected