BxSlider смените слайд на определенный слайд на ссылке навигации.

Я хочу, чтобы мой слайд BxSlider изменялся на определенный слайд, когда я нажимаю на пункт меню навигации. Если элемент навигации второй из списка, я хочу, чтобы BxSlider отображал второй слайд.BxSlider смените слайд на определенный слайд на ссылке навигации.

Моя навигационная структура:

<html> 
<ul id="pagination" class="clearfix"> 
<li><a href="#">Voter Tools</a></li> 
<li><a href="#">Candidate Tools</a></li> 
<li><a href="#">Ballot Issues</a></li> 
<li><a href="#">Data &amp; Resources</a></li> 
<li><a href="#">Poll Workers</a></li> 
<li><a href="#">Press &amp; Public</a></li> 
<li><a href="#">Links</a></li> 
</ul><!-- /#pagination --> 
</html>

источник

2016-07-20 Chad

Похоже, вы пытались создать якоря за клики. Я бы посоветовал смотреть в параметре «pagerCustom» из bxSlider: http://bxslider.com/options#pagerCustom

Ваши якоря дополнительно нужен слайд-индекс данных для того, чтобы функционировать надлежащим образом:

<ul id="pagination" class="clearfix"> 
<li><a data-slide-index="0" href="#">Voter Tools</a></li> 
<li><a data-slide-index="1" href="#">Candidate Tools</a></li> 
<li><a data-slide-index="2" href="#">Ballot Issues</a></li> 
<li><a data-slide-index="3" href="#">Data &amp; Resources</a></li> 
<li><a data-slide-index="4" href="#">Poll Workers</a></li> 
<li><a data-slide-index="5" href="#">Press &amp; Public</a></li> 
<li><a data-slide-index="6" href="#">Links</a></li> 
</ul><!-- /#pagination -->

Я предполагаю, что у вас есть предоставил код для ваших элементов, доступных для кликов, а фактические элементы списка в слайд-шоу находятся в другом месте. Что-то вдоль линий:

<ul class="bxslider"> 
    <li><img src="/images/Voter_Tools.jpg" /></li> 
    <li><img src="/images/Candidate_Tools.jpg" /></li> 
    <li><img src="/images/Ballot_Issues.jpg" /></li> 
    <li><img src="/images/Data_and_Resources.jpg" /></li> 
    <li><img src="/images/Poll_Workers.jpg" /></li> 
    <li><img src="/images/Press_and_Public.jpg" /></li> 
    <li><img src="/images/Links.jpg" /></li> 
</ul>

Вы должны быть в состоянии передать селектор для миниатюр/якорной контейнера («#pagination») для параметра pagerCustom из bxSlider. Библиотека обрабатывает все остальное!

$('.bxslider').bxSlider({ 
    pagerCustom: '#pagination' 
});

Fiddle: http://jsfiddle.net/drjeg422/2/ (Обратите внимание: изображения не существует)

источник

2016-07-20 23:09:08 Hodrobond

BxSlider смените слайд на определенный слайд на ссылке навигации.

ответ

Смежные вопросы