CODEWITHSUNDEEP
jquerybxslider
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

bxslider slider - Hover on pager

I have a bxslider slider setup with bx-pager.

I can't find an option if I hover on a pager, it will automatically go to specific slide?

For example, if I hover on "Slide 2" pager, then it will go to slide 2.

Clicking event working fine, now I want a hover to work.

               <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>

Upvotes: 0

Views: 3604

Answers (1)

VJS
VJS

Reputation: 1017

You will need to bind hover events with your custom bx-pager and using the public functions of bxslider move to the respective slide and achieve your desired effect.

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);
     }
  });

Upvotes: 1

Related Questions