2015-01-23 5 views
0

나는 bxslider 슬라이더를 bx-pager으로 설정했습니다.bxslider 슬라이더 - 호출기에 마우스를 올려 놓습니다.

호출기에 마우스를 올려 놓으면 특정 슬라이드로 자동 이동합니까? 내가 "슬라이드 2"호출기에 올려 놓으면

예를 들어, 다음은 2

클릭 이벤트가 잘 작동 슬라이드로 이동합니다, 지금은 호버 작업 할.

   <div id="bx-pager" class="slider-pager-wrap row clearfix"> 

        <div class="pager-container col-xs-4"> 
         <a class="pager-first" data-slide-index="0" href=""> 
          <p>Slide 1</p> 
         </a> 
        </div> 

        <div class="pager-container col-xs-4"> 
         <a class="pager-second" data-slide-index="1" href=""> 
          <p>Slide 2</p> 
         </a> 
        </div> 
        </div> 

답변

0

당신은 사용자 정의 BX-호출기와 호버 이벤트를 바인딩하고 각각의 슬라이드에 bxslider 이동의 공개 기능을 사용하여 원하는 효과를 달성해야합니다.

Solution : jsfiddle

$("#bx-pager li").hover(function(){ 
    //get the slide number associated with the pager 
    var newSlideNo = $($(this).find("a")[0]).attr('data-slide-index'); 
    //verify the hovered slide number is not the same as currently displayed 
    if(newSlideNo != slider.getCurrentSlide()){ 
     //slide to the new slide number 
     slider.goToSlide(newSlideNo); 
    } 
    }); 
관련 문제