Bx 슬라이더의 경우 슬라이드를 자동으로 돌리도록 설정을 해놓은뒤에
직접 좌우 버튼을 눌러서 슬라이드를 조작할경우 자동으로 돌아가는게 멈추고 다시
자동으로 돌아가지 않는 버그같은것이 있습니다.
이부분은 다시 돌아가도록 해줘야 하는데 저는 아래의 방법을 자주사용합니다.
HTML부분
<ul class='mainSl'>
<li><a href=''><img src='/test.jpg' alt=''/></a></li>
<li><a href=''><img src='/test.jpg' alt=''/></a></li>
<li><a href=''><img src='/test.jpg' alt=''/></a></li>
<li><a href=''><img src='/test.jpg' alt=''/></a></li>
</ul>
JS부분
var mainSl = $(".mainSl").bxSlider({
auto:true,
controls:true,
onSlideAfter: function($slideElement, oldIndex, newIndex){
mainSl.startAuto();
}
});
기본적으로 bx슬라이더를 돌릴때 변수를 하나 선언해서 그 변수에 넣어줍니다.
그리고 나서 onSlideArter 함수를 이용하여 슬라이드가 돌아간뒤에 다시 오토스타트를
넣어서 다시 돌아가게끔 매번 설정을 해주는것이죠.
이런식으로 해결하면 슬라이드를 좌우버튼을 클릭을 해서 멈추어도 다시 일정시간뒤에
다시 자동으로 돌아가게 됩니다. ^^
'웹관련 > Jquery plugin' 카테고리의 다른 글
[Jquery] Bx Slider 옵션 (0) | 2019.03.12 |
---|---|
[Jquery] 원형 그래프 플러그인 (0) | 2019.02.22 |
[Jquery UI] jquery datapicker 한글화 (0) | 2018.11.08 |
[Jquery] Bx Slider display:none 이였다가 display:block 으로 변경시 height 값 0이 되는문제 (1) | 2017.07.19 |
[Jquery] 패럴랙스 (0) | 2016.11.23 |
댓글