swiperのスライド内のサムネイルでページネーションを実現したい

###前提・実現したいこと
お世話になります。
swiperを使ってスライドを作りました。
特殊なことだとは思うのですが、そのスライド内にそのスライドの
サムネイルを置き、その部分にページネーションの機能をつけることは
可能なのでしょうか。
的外れの質問かもしれません。ご教授いただければ幸いです。
何卒、宜しくお願いいたします。

###該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <link rel="stylesheet" href="swiper.css">
</head>
<body>
    <!-- Swiper -->
<div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide"><img src="./img/img1.jpg">
      Slide 1
    <div>
        <ul>
            <!-- ページネーションの部分/ -->
            <li><a href=""><img src="./img/img1s.jpg">Slide 1</a></li>
            <li><a href=""><img src="./img/img2s.jpg">Slide 2</a></li>
            <li><a href=""><img src="./img/img3s.jpg">Slide 3</a></li>
            <!-- /ページネーションの部分/ -->
        </ul>
    </div>
    </div>
  <div class="swiper-slide"><img src="./img/img2.jpg">
      Slide 2
    <div>
        <ul>
            <!-- ページネーションの部分/ -->
            <li><a href=""><img src="./img/img1s.jpg">Slide 1</a></li>
            <li><a href=""><img src="./img/img2s.jpg">Slide 2</a></li>
            <li><a href=""><img src="./img/img3s.jpg">Slide 3</a></li>
            <!-- /ページネーションの部分/ -->
        </ul>
    </div>
    </div>
  <div class="swiper-slide"><img src="./img/img3.jpg">
      Slide 3
    <div>
        <ul>
            <!-- ページネーションの部分/ -->
            <li><a href=""><img src="./img/img1s.jpg">Slide 1</a></li>
            <li><a href=""><img src="./img/img2s.jpg">Slide 2</a></li>
            <li><a href=""><img src="./img/img3s.jpg">Slide 3</a></li>
            <!-- /ページネーションの部分/ -->
        </ul>
    </div>
    </div>
 </div>
</div>
</div>

<script src="swiper.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
</script>

</body>
</html>

行動規範の内容に同意します

回答1件

下記デモページにあるものならサンプルコードもあります。

【Swiper Demos】
http://idangero.us/swiper/demos/

Thumbs Gallery With Two-way Control

【Swiper/23-thumbs-gallery.html at master · nolimits4web/Swiper · GitHub】
https://github.com/nolimits4web/Swiper/blob/master/demos/23-thumbs-gallery.html

投稿2016/10/22 17:28

kei344

総合スコア69407

Shintarosan_k

2016/10/23 01:05

ご回答いただきありがとうございます。お教えいただきましたデモですと、サムネイルスライドが中心でしたので、 --- centeredSlides: false --- としました。しかし、サムネイルスライドを1画面にすると、 2枚目のサムネイルスライドをクリックした場合、最後のスライドになってしまいました。こちらの連動の設定はAPIで可能なのでしょうか。現状のコードは下記です。ご教授いただけると幸いです。何卒、宜しくお願いいたします。 ---現状のコード　ここから---  <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div> </div>  <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div> </div> </div>  <script src="../dist/js/swiper.min.js"></script>  <script> var galleryTop = new Swiper('.gallery-top', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 10, }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween:0, centeredSlides: false, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true }); galleryTop.params.control = galleryThumbs; galleryThumbs.params.control = galleryTop; </script> ---現状のコード　ここまで---

kei344

2016/10/23 03:40

> お教えいただきましたデモですと、サムネイルスライドが中心でしたので、じゃあ Nested Swipers ですか？【Swiper demo】（2スライド目が上下にも動く） http://idangero.us/swiper/demos/11-nested.html 【Swiper/11-nested.html at master · nolimits4web/Swiper · GitHub】 https://github.com/nolimits4web/Swiper/blob/master/demos/11-nested.html

行動規範の内容に同意します