모바일페이지 swiper 배너 작동안함
본문
https://theme.sir.kr/gnuboard55/demo/community?device=pc
테마를 사용하고 있습니다.
PC는 정상적으로 슬라이드가 되는데 모바일페이지로 접속하면 아예 움직이지 않아서요..
<div class="main_bn_box swiper-container">
<ul class="main_bn_ul swiper-wrapper">
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/img01.jpg" alt="메인베너" />
</div>
</li>
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/img01.jpg" alt="메인베너" />
</div>
</li>
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/img01.jpg" alt="메인베너" />
</div>
</li>
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/img01.jpg" alt="메인베너" />
</div>
</li>
</ul>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
</script>
소스는 이거입니다.. 뭐가 문제일까요
초보질문 죄송합니다
!-->!-->답변 3
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
추가해보세요
!-->아마 이부분 같은데
<!--메인배너 {-->
<div id="main_bn_box">
<div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" alt="메인베너" /></a></div>
</li>
</ul>
</div>
</div>
<!--} 메인배너-->
<script>
$(function() {
$("#main_bn").unslider({
speed: 700, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
});
</script>
unslider 관련 선언부나 정의부가
pc 버전엔 있고
mobile 버전엔 없는것 같습니다.
!-->감사합니다
답변을 작성하시기 전에 로그인 해주세요.