在上一張幻燈片上點擊下一頁時，轉到Wordpress中的下一頁？

Question

我每頁顯示12張幻燈片。在上一張幻燈片中，當我點擊下一頁時，我希望它在wordpress上進入下一頁。我正在使用wp-pagenavi，所以我需要的只是模擬點擊.nextposts鏈接。

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