swiper slide 가로 정렬이었다가 세로 정렬
본문
현재 swiper slide 아이템을 4개씩 써서 한줄에 가로 정렬로 4개가 보이는 상태입니다.
그런데 모바일로 갔을 때는 한 슬라이드에 2개의 항목이 보여지게 하고 싶은데요
swiper의 옵션값을 이용하여 바꿀 수있다고 하는데 공홈에서 찾아보고 적용해봐도 안되네요..
혹시 아시는 분 계실까요?
답변 3
대략 다음과 같이 수정을 하면 되지 않을까 합니다.
html구조와 CSS 를 수정해서 모바일에서는 세로로 출력되게 하면 될 것 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swiper Slide Example</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
.swiper-container {
width: 100%;
height: 100vh;
}
.swiper-slide {
width: 25%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
@media (max-width: 768px) {
.swiper-slide {
width: 100%;
height: 50vh;
}
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-content">Item 1</div>
</div>
<div class="swiper-slide">
<div class="slide-content">Item 2</div>
</div>
<div class="swiper-slide">
<div class="slide-content">Item 3</div>
</div>
<div class="swiper-slide">
<div class="slide-content">Item 4</div>
</div>
<div class="swiper-slide">
<div class="slide-content">Item 5</div>
</div>
<div class="swiper-slide">
<div class="slide-content">Item 6</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 10,
breakpoints: {
768: {
slidesPerView: 2,
}
}
});
</script>
</body>
</html>
참고하셔서 작업 하시면 될듯 합니다
https://codepen.io/syrizaldev/pen/xxxmdzw
js 부분 옵션 보시면 // Responsive breakpoints 해서 반응형으로 하는게 있습니다. 참고하셔서 동일하게 크기에 따라서 보여질 갯수를 지정해주시면 될거 같습니다.
우선 Swiper 컨테이너 및 슬라이드 항목을 마크업 해주시고
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Item 1</div>
<div class="swiper-slide">Item 2</div>
<div class="swiper-slide">Item 3</div>
<div class="swiper-slide">Item 4</div>
<!-- 추가 슬라이드 항목 -->
<div class="swiper-slide">Item 5</div>
<div class="swiper-slide">Item 6</div>
</div>
</div>
CSS Swiper 컨테이너의 크기를 설정하고, 슬라이드 항목의 너비를 조정
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
width: 25%; /* 한 줄에 4개의 슬라이드가 보이도록 설정 */
}
@media (max-width: 768px) {
/* 모바일에서는 한 줄에 2개의 슬라이드가 보이도록 설정 */
.swiper-slide {
width: 50%;
}
}
slidesPerView 를 모바일에 맞게 조정을 해주시면 되지 않을까 합니다.
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4, // 한 줄에 보여지는 슬라이드 개수 (기본값: 1)
spaceBetween: 10, // 슬라이드 간격 (선택적)
// 추가 옵션 및 설정...
});
아 제가 중요한 포인트를 안적었는데 모바일에서는 세로로 나열이 되어야 합니다..ㅠㅠ
세로로 2개씩이요!
답변을 작성하시기 전에 로그인 해주세요.