Когда вы нажмете следующий на последнем слайде, перейдите на следующую страницу в 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

• Использование API bxSlider мы используем следующий метод и обратный вызов:

  • onSlideBefore: Этот обратный вызов срабатывает до перехода слайдов.

  • .getSlideCount(): Этот метод возвращает общее количество слайдов

• Что еще более важно, мы используем метод JQuery .trigger(), который позволит нам щелкнуть $('.nextPostLink') удаленно.

Кстати, если у вас есть 12 слайдов используйте 13.

Детали прокомментированы в 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>