swiper 질문입니다..ㅠㅠ 채택완료
안녕하세요.. swiper slider 쓰는데 저랑 비슷한건 데모를 찾아봐도 안나와서요 ㅠㅠ
https://sir.kr/data/editor/2010/3695986177_1602059822.7434.png" width="516" />
이런식으로 나오는걸 원하는데 ..
https://sir.kr/bbs/view_image.php?fn=%2Fdata%2Feditor%2F2010%2F3695986177_1602059910.5087.png" target="_blank">https://sir.kr/data/editor/2010/3695986177_1602059910.5087.png" />
계속 이렇게 나오네요 ㅠㅠ ...
https://sir.kr/data/editor/2010/3695986177_1602059968.9908.png" width="480" />
소스는 이건데요.. ㅠㅠ
지난번에 다른분께서 알려주신 방법이 있는데
소스를 그대로 가져다 써도 안되서 .. 뭐가문제인지 모르겠습니다 ㅠㅠ 제발도와주세요 고수님들 ㅠ ㅠ
답변 1개
Demo 페이지의 "Multi Row Slides Layout" 을 참고하였습니다.
* https://swiperjs.com/demos/170-slides-per-column.html">https://swiperjs.com/demos/170-slides-per-column.html
* https://github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html">https://github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html
</p>
<p><!DOCTYPE html>
<html lang="en"></p>
<p><head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"></p>
<p>
<link rel="stylesheet" href="<a href="https://swiperjs.com/package/swiper-bundle.min.css">" target="_blank" rel="noopener noreferrer">https://swiperjs.com/package/swiper-bundle.min.css"></a>
<style>
html,
body {
position: relative;
height: 100%;
}</p>
<p> body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;</p>
<p> }</p>
<p> .swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}</p>
<p> .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: calc((100% - 30px) / 3);</p>
<p>
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head></p>
<p><body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<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>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div></p>
<p> <!-- Swiper JS -->
<script src="<a href="https://swiperjs.com/package/swiper-bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://swiperjs.com/package/swiper-bundle.min.js"></script></a></p>
<p> <!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
slidesPerColumn:3,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body></p>
<p></html></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인