I'd like to change photos when mouse is on the pager of Bxslider

Question

Instead of clicking the circles in bxSlider's pager, I'd like to hover with the mouse instead. But I have no idea what to do. I saw source code and changed from click to hover, for example at this part like this site.

from

slider.pagerEl.on('click', 'a', clickPagerBind);

to

slider.pagerEl.on('hover', 'a', clickPagerBind);

However, it didn't work. Would you please give me some advice?

BxSlider v4.1.2

Answer 1

All of the details are commented in source. If you use bxslider.min.js hosted by CDN (like this demo), do not use the corresponding bxslider.css file. CDN doesn't handle assets correctly (or maybe I don't). Instead, host CSS file and assets (i.e. loader.gif, controls.png) in your own server.

SNIPPET

$(function() {

  // Instantiate bxSlider to a var bx
  var bx = $('.bxSlider').bxSlider({

    /* Do not use useCSS option. bxSlider
    | does not handle animation that it doesn't 
    | handle itself very well.
    */
    useCSS: false
  });

  // Delegate mouseenter/leave events to .bx-pager-link
  $('.bx-pager-link').on('mouseenter mouseleave', function(e) {

    // Prevent <a> from jumping default behavior
    e.preventDefault();

    /* Get the data-slide-index attribute value
    | and store it in var goTo.    
    | Next, use the bxSlider method goToSlide() 
    | to  move slides to the designated position
    | determined by the value of var goTo
    */
    var goTo = $(this).data('slide-index');
    bx.goToSlide(goTo);
  });
});

/* Use bxslider.css for styles */

/* This demo has minimal styling 
| because CDN doesn't handle 
| assets correctly and for
| emphasis of specific controls
*/

img {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}
.bx-pager-item {
  display: table-cell;
  padding: 0 10px;
}
.bx-pager-link {
  background: rgba(255, 0, 0, .5);
  color: rgba(255255, 255, .5);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  padding: 5px;
  text-align: center;
  font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>


<ul class='bxSlider'>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
</ul>