goToSlide с bxSlider не работает - PullRequest
Новая
       7

goToSlide с bxSlider не работает

0 голосов
/ 07 мая 2018

Я перепробовал много вариантов, но все они не работали. В голове есть этот код: 

<script>
    $(document).ready(function(){
        $(function(){
            $('.bxslider').bxSlider({
                pagerCustom: '#bx-pager',
                adaptiveHeight: true
        });
</script>

(В голове больше сценария, конечно, достаточно}, чтобы закрыть сценарий. Слайдер работает нормально, но goToSlide ничего не делает.)

А теперь я хочу перейти к слайду с помощью функции goToSlide (), если window.location - #xyz. Вот что я делаю: 

<script type="text/javascript">
var slider = $('.bxslider').bxSlider();
    if (window.location.href === "https://myadress.de/#link1") {
        slider.goToSlide(0);
    } 
    else if (window.location.href === "https://myadress.de/#link2") {
        slider.goToSlide(1);
    }
</script>

Цель состоит в том, чтобы напрямую связать некоторые слайды с других страниц.

Ваша помощь будет потрясающей.

// редактировать: Теперь это работает, что я могу скользить к определенному слайдеру. Но только если я перезагрузить страницу. Пример: если я наберу https://myadress.de/#link2 в моем браузере, он ничего не сделает. Но если я перезагружу точно ту же страницу, она переместится на определенный слайдер (он не переместится в нужное место на сайте, но это другая проблема).

1 Ответ

0 голосов
/ 09 мая 2018

Решение

Предположим, что каждая страница, на которую переходит bxSlider, является страницей на одном и том же веб-сайте. Для каждой страницы, к которой вы хотите перейти на bxSlider, вы можете настроить каждый слайдер по-своему или идентично Самое важное отличие состоит в том, что на каждой странице вы используете эту опцию: 

startSlide: {index number}

В следующей демонстрации:

  • 5 стр.
  • На каждой странице есть 2 bxSliders.
  • Первый слайдер - обычный слайдер.
  • Второй слайдер имеет ссылку на соответствующую страницу.
  • Оба ползунка синхронизируются друг с другом, привязанными к обратному вызову события API onBeforeSlide, обрабатываемому пользовательской функцией bxMove().
  • Метод .goToSlide() вызывается bxMove().
  • Ползунки каждой страницы имеют startSlide со значением соответствующего порядка их страниц.

Ссылка

Опции bxSlider

Эта демонстрация не полностью функционирует, потому что в ней 5 страниц, что выходит за рамки возможностей SO. Перейдите к этому Plunker для полнофункциональной демонстрации.

Test

Перейдите к Plunker и используйте верхний пейджер и первый слайдер условно. Когда на нужном слайде, нажмите второй слайдер внизу. Он перейдет на указанную страницу и начнется с указанного слайда.

Plunker

Демо 

const cfgA = {
  startSlide: 0,
  pagerCustom: '.bx-pager',
  onSlideBefore: bxMove
};
const cfgB = {
  startSlide: 0,
  controls: false,
  pager: false,
  onSlideBefore: bxMove
};

const bx = $('.bx-slider').bxSlider(cfgA);

const lx = $('.bx-linx').bxSlider(cfgB);

function bxMove($ele, from, to) {
  bx.goToSlide(to);
  lx.goToSlide(to);
  $('.bx-core a').removeClass('active');
  $('.bx-pager a').eq(to).addClass('active');
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font: 400 16px/1.3 Consolas;
}

.bx-wrapper {
  margin-bottom: 1em;
}

.bx-core img {
  display: block;
  margin: 0 auto;
}

.bx-core a,
.bx-core a:link,
.bx-core a:visited {
  display: table-cell;
  text-decoration: none;
  font-size: 3em;
  color: #00c;
}

.bx-core a:hover,
.bx-core a:active {
  outline: 3px ridge cyan;
}

.bx-pager a.active {
  outline: 3px ridge tomato;
}

.bx-linx a.active+a {
  color: tomato;
}

.bx-pager,
.bx-linx {
  display: table;
  margin: 0 auto .75em;
  text-align: center;
}

.bx-linx {
  width: 150px;
}

h1 {
  font-size: 3.5rem;
  text-align: center;
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>Index</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />

  <style>

  </style>


</head>

<body>
  <main id='bx-core0' class='bx-core'>
    <nav class="bx-pager">
      <a data-slide-index="0" href="#/" class='active'>
        <img src="https://placeimg.com/200/200/people/0" width="50" /></a>
      <a data-slide-index="1" href="#/">
        <img src="https://placeimg.com/200/200/people/1" width="50" /></a>
      <a data-slide-index="2" href="#/">
        <img src="https://placeimg.com/200/200/people/2" width="50" /></a>
      <a data-slide-index="3" href="#/">
        <img src="https://placeimg.com/200/200/people/3" width="50" /></a>
      <a data-slide-index="4" href="#/">
        <img src="https://placeimg.com/200/200/people/4" width="50" /></a>
    </nav>

    <ul class="bx-slider">
      <li>
        <img src="https://placeimg.com/200/200/people/0" />
      </li>
      <li>
        <img src="https://placeimg.com/200/200/people/1" />
      </li>
      <li>
        <img src="https://placeimg.com/200/200/people/2" />
      </li>
      <li>
        <img src="https://placeimg.com/200/200/people/3" />
      </li>
      <li>
        <img src="https://placeimg.com/200/200/people/4" />
      </li>
    </ul>

    <nav class='bx-linx'>
      <a data-slide-index="0" href="index.html">?</a>
      <a data-slide-index="1" href="page1.html">➊</a>
      <a data-slide-index="2" href="page2.html">➋</a>
      <a data-slide-index="3" href="page3.html">➌</a>
      <a data-slide-index="4" href="page4.html">➍</a>
    </nav>
    <h1>Index</h1>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <script>
  </script>


</body>


</html>
...