When hit next on last slide go to next page in Wordpress?

Question

I'm showing 12 slides per page. On last slide, when I hit next, I want it to go to next page on wordpress. I'm using wp-pagenavi, so all I need is to simulate a click on .nextpostslinks.

Using bxslider, wordpress and custom pager.

$(function () {
  $('.bx-next').click(function() {
    var index = $('.col-xs-1 a.active').data('slide-index');
    if ( index = 11 ) {
      $('.bx-next').click(function() {
        event.preventDefault(); 
        $('.nextpostslink').click(); 
      });
    };
  });
});

Thanks.

Answer 1

• Using the bxSlider API we utilize the following method and callback:

  • onSlideBefore: This callback fires before slide transition.

  • .getSlideCount(): This method will return the total number of slides

• More importantly we are using the jQuery method .trigger() which will allow us to click $('.nextPostLink') remotely.

BTW, if you have 12 slides then use 13.

Details are commented in Snippet

SNIPPET

$(function() {
  // Instantiate bxSlider and store it in a var
  var bx = $('.bx').bxSlider({

    // Callback before the next slide, call nextPage()
    onSlideBefore: nextPage,
    slideWidth: 150,
  });

  /* Before every slide this function will...
  || get the last slide...
  || compare last with current indexed slide...
  || ...if they are equal in value...
  || ...the trigger() method will fire a...
  || ...synthetic click to .nextPostLink.
  */
  function nextPage($ele, from, to) {
    var last = (bx.getSlideCount() - 1);
    var index = parseInt(to, 10);
    if (last === index) {
      $('.nextPostLink').trigger('click');
    }
  }
});

/* This function is to demonstrate that .nextPostLink...
|| ...gets triggered when bxSlider slides into the...
|| ...last slide. If successful, a image of Lenna appears
*/
$('.nextPostLink').click(function() {
  $(this).css('background-image', 'url(http://imgh.us/Lenna.png)');
});

.nextPostLink {
  height: 150px;
  width: 150px;
  background-size: contain;
  position: relative;
  bottom: 200px;
  color: cyan
}

<link href='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>

<ul class='bx'>
  <li class='slide'>
    <img src='http://placehold.it/150x150/000/fff?text=1'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/00f/eee?text=2'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/0e0/111?text=3'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/f00/fff?text=4'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/fc0/000?text=5'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/fff/000?text=6'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/000/fff?text=7'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/00f/eee?text=8'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/0e0/111?text=9'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/f00/fff?text=10'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/fc0/000?text=11'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/fff/000?text=12'>
  </li>
  <li class='slide'>
    <img src='http://placehold.it/150x150/fff/fff?text=13'>
  </li>
</ul>

<div class='nextPostLink'>Next Post Link</div>