답변 3개
채택된 답변
+20 포인트
2년 전
대략 다음과 같이 수정을 하면 되지 않을까 합니다.
html구조와 CSS 를 수정해서 모바일에서는 세로로 출력되게 하면 될 것 같습니다.
</p>
<p><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swiper Slide Example</title>
<link rel="stylesheet" href="<a href="https://unpkg.com/swiper/swiper-bundle.min.css">" target="_blank" rel="noopener noreferrer">https://unpkg.com/swiper/swiper-bundle.min.css"></a>
<style>
.swiper-container {
width: 100%;
height: 100vh;
}</p>
<p> .swiper-slide {
width: 25%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}</p>
<p> @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></p>
<p> <script src="<a href="https://unpkg.com/swiper/swiper-bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://unpkg.com/swiper/swiper-bundle.min.js"></script></a>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 10,
breakpoints: {
768: {
slidesPerView: 2,
}
}
});
</script>
</body>
</html></p>
<p>참고하셔서 작업 하시면 될듯 합니다
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
우선 Swiper 컨테이너 및 슬라이드 항목을 마크업 해주시고
</p>
<p><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 컨테이너의 크기를 설정하고, 슬라이드 항목의 너비를 조정
</p>
<p>.swiper-container {
width: 100%;
height: 100%;
}</p>
<p>.swiper-slide {
width: 25%; /* 한 줄에 4개의 슬라이드가 보이도록 설정 */
}</p>
<p>@media (max-width: 768px) {
/* 모바일에서는 한 줄에 2개의 슬라이드가 보이도록 설정 */
.swiper-slide {
width: 50%;
}
}slidesPerView 를 모바일에 맞게 조정을 해주시면 되지 않을까 합니다.
</p>
<p>var swiper = new Swiper('.swiper-container', {
slidesPerView: 4, // 한 줄에 보여지는 슬라이드 개수 (기본값: 1)
spaceBetween: 10, // 슬라이드 간격 (선택적)
// 추가 옵션 및 설정...
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
심심한나쵸
2년 전
댓글을 작성하려면 로그인이 필요합니다.
2년 전
https://codepen.io/syrizaldev/pen/xxxmdzw
js 부분 옵션 보시면 // Responsive breakpoints 해서 반응형으로 하는게 있습니다. 참고하셔서 동일하게 크기에 따라서 보여질 갯수를 지정해주시면 될거 같습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
세로로 2개씩이요!