Question

我正在使用iDangero Swiper并尝试创建指向特定幻灯片的链接，我将使用此链接将所有幻灯片链接到唯一链接。

我如何才能做到这一点？

这是我的代码：

<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8" /> 
  <link rel="stylesheet" href="https://idangero.us/swiper/dist/css/swiper.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-5">
        <button type="button" class="btn btn-primary btn-lg btn-block btn-title">
        <a class="white" href="#">
        <span class="glyphicon glyphicon-chevron-left back" aria-hidden="true"></span>
        </a>
        TITLE
        </button>
      <a href="#">Swipe to slide 3</a>
            <div id="content">
                <div class="nav-center">
                    <div class="nav-bg">
                        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                            <li class="active"><a href="#one" data-toggle="tab">First Tab</a></li>
                            <li><a href="#two" data-toggle="tab">Second Tab</a></li>
                            <li><a href="#three" data-toggle="tab">Third Tab</a></li>
                        </ul>
                    </div>

                    <div id="my-tab-content" class="tab-content">
                        <div class="tab-pane active" id="one">
                            <!-- Swiper -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                    <p>Slide1</p>
                                    </div>
                                    <div class="swiper-slide">
                    <p>Slide2</p>
                                    </div>
                                    <div class="swiper-slide">
                  <p>Slide3</p>
                  </div>
                                </div>
                            </div>
                        </div> <!-- #one -->
                        <div class="tab-pane" id="two">
                            <p>Content</p>
                        </div>
                        <div class="tab-pane" id="three">
              <p>Content</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
})

</script>
</body>

</html>

Answer 1

您可以为链接指定一个ID：

<a href="#" id="slide3">Swipe to slide 3</a>

然后你可以使用方法slideTo（）

使Slider滑动到你想要的幻灯片

var swiper = new Swiper('.swiper-container', {})
$('#slide3').click(swiper,function(){
    swiper.slideTo(3);
})

将Swiper链接实现到特定幻灯片

1 个答案: