모바일 배너 관련하여 문의드립니다.
본문
그누보드 5 기반으로 테마는 그누보드 버전을 사용하였습니다.
그런데 모바일 버젼으로 보면 배너가 있는데, 자동 슬라이드가 되도록 하고 싶습니다.
아래의 소스인데 슬라이드가 될까요??
<!--메인이미지-->
<div class="main_bn_box swiper-container" style="border:none">
<ul class="main_bn_ul swiper-wrapper">
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/mobile/m_idx_bn_1.png" alt="메인베너" />
</div>
</li>
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/mobile/m_idx_bn_2.png" alt="메인베너" />
</div>
</li>
</ul>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
});
$(function() {
$("#m_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>
답변 1
$("#m_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
autoplay: true
});
autoplay를 추가하시면 됩니다.
autoplay default:
false
Should the slider move by itself or only be triggered manually?!-->