스와이퍼 슬라이드 버튼 작동이 안됩니다..
본문
갤러리 게시판 view.skin.php에 스와이퍼 슬라이드를 쓰고싶습니다..!!
아래처럼 코드 수정하고 첫번째 첨부파일 제외한 나머지 첨부파일을 뜨게하는 것 까진 생각했던 대로 된 것 같은데 아무리 버튼을 누르고 새로고침하고 쿠키삭제하고 다시 누르고 해봐도 슬라이드가 작동을 안하네요ㅜㅜ 코드에 문제가 있는걸까요? 제이쿼리는 cdn으로 넣었습니다...
<div class="swiper v_more">
<div class="swiper-wrapper">
<?php
for ($i=1; $i<count($view['file']); $i++) {
// if($thumb['ori']) {
// $img = $thumb['ori'];
// } else {
// $img = G5_IMG_URL.'/no_img.png';
// $thumb['alt'] = '이미지가 없습니다.';
// }
?>
<?php // 파일 출력
echo "<div class=\"swiper-slide\">\n";
$v_img_count = count($view['file']);
if($v_img_count) {
echo $view['file'][$i]['view'];
echo get_file_thumbnail($view['file'][$i]['view']);
$thumb = get_view_thumbnail($view['file'][$i]['view']);
}
echo "</div>\n";
?>
<?php } ?>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
var swiper = new Swiper('.v_more', {
initialSlide : 0,
slidesPerView: 'auto',
observer: true,
observeParents: true,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
답변 1
해당소스로 테스트해봤는데 정상적으로 버튼 작동 합니다.
버튼 영역 z-index한번 확인해보세요.
그리고 jquery 는 별다른 소스 수정을 하지 않았으면 기본적으로 로드가 됩니다.
설마 그게 아니겠지만 swiper js를 jquery 위에 선언하지 않았는지 확인도 해보심이.
무튼 소스는 정상입니다.
<div class="swiper v_more">
<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>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
var swiper = new Swiper('.v_more', {
initialSlide : 0,
slidesPerView: 'auto',
observer: true,
observeParents: true,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
해결했습니다. 도움주셔서 감사합니다!