2016-08-26 6 views
0

iDangero Swiper를 사용하고 특정 슬라이드에 대한 링크를 만들려고 시도 할 때이 링크를 사용하여 모든 슬라이드를 고유 링크로 연결합니다.특정 슬라이드에 대한 스 와이프 링크 구현

어떻게하면됩니까?

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

은 다음 슬라이더 당신이 방법으로 원하는 슬라이드로 슬라이딩 할 수 있습니다 : 당신은 링크에 ID를 제공 할 수 있습니다

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

: 여기

내 코드입니다 slideTo()

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