swiper slide 양 옆 공백만들기
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.swiper { width: 1000px; height: 400px; margin: auto; background: darkgray; }
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
background: royalblue;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- html 기본 세팅 -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 01</div>
<div class="swiper-slide">Slide 02</div>
<div class="swiper-slide">Slide 03</div>
<div class="swiper-slide">Slide 04</div>
<div class="swiper-slide">Slide 05</div>
<div class="swiper-slide">Slide 06</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.mySwiper', {
/* 보여지는 슬라이드 갯수 */
slidesPerView: 3,
/* swiper-slide에 각각 margin-right를 준다. */
spaceBetween: 20,
/* 전체적인 슬라이드의 왼쪽에 20px 공백을 준다. */
slidesOffsetBefore: 20,
/* 전체적인 슬라이드의 오른쪽에 20px 공백을 준다. */
slidesOffsetAfter: 20,
pagination: {
el: '.swiper-pagination',
clickable: true,
}
})
</script>
</body>slidesOffsetBefore 전체적인 슬라이드 왼쪽에 공백을 준다.
slidesOffsetAfter 전체적인 슬라이드 오른쪽에 공백을 준다.