javascript - 当点击最后一张幻灯片上的下一页时，转到 WordPress 中的下一页？

Question

我每页显示 12 张幻灯片。在最后一张幻灯片上，当我点击下一张时，我希望它转到 WordPress 上的下一页。我使用的是 wp-pagenavi，所以我需要的只是模拟 .nextpostslinks 上的点击。

使用 bxslider、wordpress 和自定义分页器。

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

谢谢。

Answer 1

• 使用 bxSlider API，我们利用以下方法和回调:

  • onSlideBefore :此回调在幻灯片转换之前触发。

  • .getSlideCount() :该方法将返回幻灯片总数

• 更重要的是我们使用的是 jQuery 方法 .trigger()这将 允许我们远程点击 $('.nextPostLink')。

顺便说一句，如果您有 12 张幻灯片，则使用 13 张。

详细信息在代码片段中评论

片段

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