bxSlider: навигация с именованными хэшами (при нажатии и загрузке) - PullRequest
Новая
       33

bxSlider: навигация с именованными хэшами (при нажатии и загрузке)

0 голосов
/ 05 сентября 2018

У меня есть сайт с горизонтальной прокруткой, который использует bxSlider для размещения блоков контента на слайдах с элементами управления prev / next для перехода от одного слайда к другому. В меню навигации есть #шедовые ссылки, указывающие на слайды.

При щелчке привязки в меню bxSlider должен переместиться к рассматриваемому слайду (не переходить) и распознать, какой слайд активен (чтобы предыдущие / следующие ссылки работали должным образом).

Кроме того, если кто-то заходит на страницу через прямой URL, например, mydomain.com/#news, он должен автоматически плавно переместиться к правому слайду.

Пока что с собственным поведением привязки щелчок по навигационной ссылке переходит к правой части, но bxSlider не распознает, какой слайд активен, поэтому портит предыдущие / следующие привязки.

bxSlider не разрешает навигацию по именованным слайдам, поэтому вы не можете указать bxSlider на определенный слайд.

Вот кодекс для данной задачи:

bxSlider с хэш-навигацией

HTML 

<nav>
  <ul>
    <li>
      <a href="#start">Start</a>
    </li>
    <li>
      <a href="#news">News</a>
    </li>
    <li>
      <a href="#ideas">Ideas</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<div class="pages">
    <section id="start">
    <h1>Start</h1>
        <p>Some content</p>
    </section>
    <section id="news">
    <h1>News</h1>
        <p>Some new content</p>
    </section>
    <section id="ideas">
    <h1>Ideas</h1>
        <p>Some ideas content</p>
    </section>
    <section id="contact">
    <h1>Contact</h1>
        <p>Some contact content</p>
    </section>
</div>

JS 

// Horizontal scrolling

jQuery(function(){
  jQuery('.pages').bxSlider({
     pager: false,
     slideSelector: 'section',
     nextText: '>',
     prevText: '<',
     responsive: true,
     adaptiveHeight: true,
     infiniteLoop: false,
     hideControlOnEnd: true,
  });
});
...