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