swiper 가로세로 배열 질문입니다... 채택완료
가로 4개 세로 3개로 구성된 슬라이드 인데요
1 2 3 4
5 6 7 8
9 10 11 12
첫슬라이드에 이런 순서로 나타난뒤 다음페이지도
13 14 15 16
17 18 19 20
21 22 23 24
같은 순서로 나오게 하고싶은데
[슬라이드1] > [슬라이드2]
1 4 7 10 > 13 16 19 22
2 5 8 11 > 14 17 20 23
3 6 9 12 > 15 18 21 24
기본값은 이렇게 나오고
[슬라이드1] > [슬라이드2]
1 2 3 4 > 5 6 7 8
9 10 11 12 > 13 14 15 16
17 18 19 20 > 21 22 23 24
slidesPerColumnFill: 'row' 를 넣으면
이런식으로 두번째 페이지에 5 6 7 8 순서의 이미지가 나옵니다ㅜㅜ
원하는대로 출력하려면 어떻게 해야되나여..
고수님들 도와주세욤!!
답변 2개
단일 스와이퍼로는 안되고 nest로 구현해봤습니다. 게시판등에서 불러올경우 12개씩 끊어서 .swiper-parent .swiper-slide안에 넣어주시면 되겠네요.
</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<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" />
<!-- Link Swiper's CSS -->
<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>
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
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;
}
.swiper-child .swiper-slide{
height: 100px;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container swiper-child">
<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 class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container swiper-child">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 13</div>
<div class="swiper-slide">Slide 14</div>
<div class="swiper-slide">Slide 15</div>
<div class="swiper-slide">Slide 16</div>
<div class="swiper-slide">Slide 17</div>
<div class="swiper-slide">Slide 18</div>
<div class="swiper-slide">Slide 19</div>
<div class="swiper-slide">Slide 20</div>
<div class="swiper-slide">Slide 21</div>
<div class="swiper-slide">Slide 22</div>
<div class="swiper-slide">Slide 23</div>
<div class="swiper-slide">Slide 24</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<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>
<!-- Initialize Swiper -->
<script>
var swiper_parent = new Swiper('.swiper-parent', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
var swiper_child = new Swiper('.swiper-child', {
nested: true,
slidesPerColumnFill: 'row',
slidesPerView: 4,
slidesPerColumn: 3,
slidesPerGroup: 12
});
</script>
</body>
</html>
</pre>
<p>
답변에 대한 댓글 1개
sooable댓글을 작성하려면 로그인이 필요합니다.
swiper에는 자체적으로 지원하는게 없는것 같네요
flex-order 등을 활용하여 하셔야 할 것 같습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
방법을 찾다가 세크티님의 답변을 보게 되었습니다,,
혹시 ' 게시판등에서 불러올경우 12개씩 끊어서' 이 부분 도움을 좀 구해도 될까요?
저는 4x2 구조이기 때문에 한 부모 슬라이드당 8개의 슬라이드가 나오게 되는데
첫 자식 슬라이드는 1~8번째 글, 두번째 자식 슬라이드는 9~16번째 글,, 이렇게 가면서
게시판의 모든 글이 끝날때까지..
머리론 구조를 알겠는데 sql문을 어떻게 써야할지 헤매고 있네요..
완전 기초적인 불러오기만 해왔던 초초급 퍼블리셔입니다..ㅠㅠ
[code]
<div class="m2box_wrap">
<div class="sd_prev"><img src="<?=G5_THEME_IMG_URL?>/sd_prev.png" alt=""></div>
<div class="inner">
<div class="swiper-container swiper-parent m2_swiper">
<div class="swiper-slide">
<?
$sql = "select * from g5_write_performance where 1=1 order by wr_datetime desc";
$result = sql_query($sql);
for($j=0;$j<sql_fetch_array($result)/8;$j++){
?>
<div class="swiper-container swiper-child">
<ul class="swiper-wrapper">
<?
for($i=0; $row=sql_fetch_array($result); $i++){
$all_img = get_all_thumbnail('performance', 1, $row['wr_id'], 464, 262);
foreach($all_img as $v);
?>
<li class="swiper-slide">
<a href="<?=G5_BBS_URL?>/board.php?bo_table=performance&wr_id=<?=$row['wr_id']?>" class="thum"><img src="<?=$v['src']?>" alt=""></a>
<a href="<?=G5_BBS_URL?>/board.php?bo_table=performance&wr_id=<?=$row['wr_id']?>" class="tit"><?=$row['wr_subject']?></a>
</li>
<?}?>
</ul>
</div>
<?}?>
</div>
</div>
</div>
<div class="sd_next"><img src="<?=G5_THEME_IMG_URL?>/sd_next.png" alt=""></div>
</div>
<script>
var swiper = new Swiper('.swiper-parent', {
loop: true,
navigation: {
nextEl: '.sd_next',
prevEl: '.sd_prev',
},
});
var swiper_child = new Swiper('.swiper-child', {
nested: true,
slidesPerColumnFill: 'row',
slidesPerView: 4,
slidesPerColumn: 2,
slidesPerGroup: 8,
});
</script>
[/code]