Question

我尝试了很多选项，但所有选项都没有用。在头部有这个代码：

<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，则不执行任何操作。但如果我重新加载完全相同的页面，它会滑动到特定的滑块（它不会跳到网站上的正确位置，但这是另一个问题）。

Answer 1

解决方案

我们假设每个页面bxSlider跳转到同一网站上的页面。对于希望bxSlider跳转到的每个页面，您可以设置不同或相同的每个滑块。最重要的区别是，在每个页面上，您都使用此选项：

startSlide: {index number}

在以下演示中，有：

5页。
每个页面都有2个bxSliders。
第一个滑块是普通滑块。
第二个滑块有指向相应页面的链接。
两个幻灯片彼此同步绑定到由自定义函数onBeforeSlide处理的API事件回调bxMove()。
方法.goToSlide()由bxMove()调用。
每页＆＃39;滑块的startSlide值与其页面的相应顺序相同。

参考

<强> bxSlider Options

此演示无法完全发挥作用，因为它具有超出SO功能的5页。转到此Plunker进行功能齐全的演示。

测试

转到 Plunker 并按常规使用顶部寻呼机和第一个滑块。在所需的幻灯片上，单击底部的第二个滑块。它将跳转到指示的页面并从指示的幻灯片开始。

<小时/>

Plunker

演示

＆＃13;

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');
}

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

goToSlide与bxSlider无法正常工作

1 个答案:

解决方案

参考

测试

Plunker

演示