var mainSlider = $('.mainSlide > .slider').bxSlider({
auto: true,
pause: 2000,
pager: false,
controls: true,
autoControls: true,
stopAutoOnClick: true, //prev, next 누르면 stop됨
autoControlsCombine: true,
autoControlsSelector: '#main-control .stop',
prevSelector: '#main-control .prev',
nextSelector: '#main-control .next',
infiniteLoop: true,
onSlideBefore: function ($slideElement, oldIndex, newIndex){
var current_index = parseInt(newIndex + 1);
if(current_index > 8){
$('#main-counter .current').text(current_index);
}else{
$('#main-counter .current').text('0' + current_index);
};
}
});
if(mainSlider.getSlideCount() > 9){
$('#main-counter .total').text(mainSlider.getSlideCount());
}else{
$('#main-counter .total').text('0' + mainSlider.getSlideCount());
};
<div class="mainSlide">
<ul class="slider">
<li class="main_visual01">메인이미지 1</li>
<li class="main_visual02">메인이미지 2</li>
<li class="main_visual03">메인이미지 3</li>
</ul>
<div id="main-control" class="outside">
<div class="outside-wrap">
<span class="prev"></span><span class="stop"></span><span class="next"></span>
</div>
</div>
<div id="main-counter">
<span class="current">01</span> / <span class="total"></span>
</div>
</div>
댓글