갤러리뷰 슬라이딩 문제 (swiper 소스활용)
본문
위의 모습은 갤러리 게시판을 활용하여 swiper 소스로 첨부파일에 이미지를 등록시 슬라이드되어 보여지게 코딩한모습입니다
다른건 다 정상적으로 작동하는데 이상하게 이미지갯수가 6개인데 슬라이드 밑에 점모양을 보면 8개로 설정되어 있고, 아래 썸네일도 우측에 흰색으로 이미지가 2개가 더 등록되어 클릭이됩니다
물론 이미지 등록을 안한상태인것이고, 클릭시 아무것도 보여지지 않고 맨 마지막사진 그대로 입니다
이게 도통 뭐가 문제인지 모르겠어서 혹시 아래의 코딩 소스를 보시고 아시는분이 계시다면
답변해주신다면 매우 감사드리겠습니다 ( 꾸벅 )
<!-- 슬라이드영역 -->
<div class="slide_all">
<div class="swiper-container mySwiper3">
<div class="swiper-wrapper">
<?php
$v_img_count = count($view['file']);
if($v_img_count) {
for ($i=0; $i<=count($view['file']); $i++) {
echo "<div class=\"swiper-slide\">";
echo get_file_thumbnail($view['file'][$i]);
echo "</div>";
}};
?>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div thumbsSlider="" class="swiper-container mySwiper4" style="margin-top:20px;">
<div class="swiper-wrapper slide_th">
<?php
$v_img_count = count($view['file']);
if($v_img_count) {
for ($i=0; $i<=count($view['file']); $i++) {
echo "<div class=\"swiper-slide\">";
echo get_file_thumbnail($view['file'][$i]);
echo "</div>";
}};
?>
</div>
</div>
</div>
<style>
.swiper-slide {
height:600px;
overflow:hidden;
}
.slide_th img {
width:150px;
height:100px;
}
</style>
<script>
var swiper = new Swiper(".mySwiper4", {
slidesPerView: 8,
freeMode: true,
watchSlidesProgress: true,
});
var swiper = new Swiper(".mySwiper3", {
autoplay: {
delay: 3000,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
loop: true,
effect: "fade",
speed : 500,
thumbs: {
swiper: swiper,
},
});
</script>
<!-- 슬라이드영역 -->
답변 4
for ($i=0; $i<=count($view['file']); $i++) {
이부분이 문제 있어보이네요.
$view['file'] 안에는 처음에 $view['file']['count']에 파일수가 들어가 있습니다. 이것도 카운트돼서
반복문이 돌아가고 <= 가 아니라 < 를 써야 파일수만큼 돌수 있습니다.
for ($i=0; $i<$view['file']['count']; $i++) {
이렇게 반복문을 돌리서야 할것 같네요.
slidesPerView: 8,
이것 때문에 그런거 아닐까요?
var swiper = new Swiper(".mySwiper4", {
slidesPerView: 8,
freeMode: true,
watchSlidesProgress: true,
});
부분에서 slidesPerView: 8, 를 6으로 변경해보세요
slidesPerView: 8, 를 6으로 변경해보세요