2016-08-26 7 views
0

iDangero Swiperを使用して特定のスライドへのリンクを作成しようとしていますが、これを使用してすべてのスライドを一意のリンクでリンクします。特定のスライドにスワイパーリンクを実装する

どうすればいいですか?

はここに私のコードです:

http://codepen.io/RogerHN/pen/LkKgXB

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

答えて

1

あなたがリンクにIDを与えることができます。

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

を、あなたはスライダー方式としたいスライドにスライドすることができますslideTo()

var swiper = new Swiper('.swiper-container', {}) 
$('#slide3').click(swiper,function(){ 
    swiper.slideTo(3); 
}) 
関連する問題