반응형
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전체적인 슬라이드 왼쪽에 공백을 준다.
slideOffsetAfter전체적인 슬라이드 오른쪽에 공백을 준다.
반응형
'🐣codeLab' 카테고리의 다른 글
| 모바일 브라우저에서 100vh 오류(직접해보기) (3) | 2021.12.17 |
|---|---|
| 3Depth(level) 만들기 (0) | 2021.10.21 |
| SVG 참고 (0) | 2021.08.31 |
| 스크롤 시 윈도우 하단에 고정하기 (0) | 2021.08.25 |
| darkmode 만들어보기 (0) | 2021.08.18 |
