사이트 내 전체검색

Bxslider 애니메이션중 클릭으로 애니메이션 전환 멈추고 다음으로 넘어가기

페이지 정보

로빈아빠 조회 369회 2018-03-18 05:27

본문

Stop Bxslider on Click when In Ticker Mode


                var slider_config = {
                      minSlides: 4,
                          maxSlides: 4,
                          slideWidth: 170,
                          slideMargin: 10,
                          ticker: true,
                          speed: 30000,
                          tickerHover:true,
                          useCSS:false
                    }
var slider = $('.portfolio-slider').bxSlider(slider_config);


 $('ul.portfolio-slider  li').on({
  click: function(e){
  e.preventDefault();
                $('a[rel*=facebox-cap]').facebox();

    var slide_index = slider.getCurrentSlide();
    slider_config['speed'] = 0;
    slider_config['startSlide'] = slide_index; 
    slider.reloadSlider(slider_config);
  },
  mouseleave: function(e){
      e.preventDefault();
    var slide_index = slider.getCurrentSlide();
  slider_config['speed'] = 30000;
    slider_config['startSlide'] = slide_index; 
    slider.reloadSlider(slider_config);
  }
});


변수를 활용해서 이동할때 클릭하면 즉시이동하게 처리하는방법
is_working_1 이 1이면 현재 애니메이션 중이라 즉시 이동시킴

<script>
$(document).ready(function() {
var current_1=0;
var is_working_1=0;
var slider_config = {
        hideControlOnEnd: true,
captions: false,
autoControls: true,
stopAuto: true,
stopAutoOnClick: true,
        pager: false,
auto: false,
speed: 800,
pause: 3000,
//mode:'fade',
        nextText: '',
        prevText: '',
startSlide:current_1,
onSlideBefore: function(){
is_working_1=1;
no=slider_1.getCurrentSlide();
set_slider_1(no);
},
onSlideAfter: function(){
is_working_1=0;
no=slider_1.getCurrentSlide();
set_slider_1(no);
}
    }

    var slider_1=$('#bxslider1 ul').bxSlider(slider_config);
$('.titles_line').on('click', function( event ) {
event.preventDefault();
  var arr=$(this).attr('id').split('_');

if (is_working_1)
{
is_working_1=0;
slider_config['startSlide'] = arr[2]; 
set_slider_1(arr[2]);
slider_1.reloadSlider(slider_config);
}
else {
set_slider_1(arr[2]);
slider_1.goToSlide(arr[2]);
}
});

function set_slider_1(no) {
$('.titles_line').removeClass('on');
$('#news_lines_'+no).addClass('on');
//slider_1.stopAuto();
//slider_1.startAuto();
}
set_slider_1(0);


});

</script>

댓글목록

등록된 댓글이 없습니다.

게시물 검색

회원로그인

접속자집계

오늘
648
어제
743
최대
3,566
전체
2,335,094