Implement Swiper link to specific slide

jquery slide swiper

10,378

You can give an id to the link:

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

then you can make the Slider sliding to the slide you want with method slideTo()

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

10,378

RogerHN

Updated on May 26, 2022

Comments

RogerHN about 2 years

I am using iDangero Swiper and trying to create a link to specific slide, I will use this to link all the slides with a unique link.

How I can make that work?

Here's my code:

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>