javascript - 带有跳转滑动功能的 jQuery 图像 slider

Question

我正在尝试创建一个与 here 相同的内容 slider 唯一的问题是它们有文字和图像，而我只想要图像。

基本上在第一页上它会显示缩略图，因此当您单击其中任何一个时，它会跳转到该特定幻灯片。

我已经尝试使用 swiper jquery 插件设置 slider ，但我无法跳转到特定的幻灯片，这是我的代码:

    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)">
        <div class="block">
            <a href="#page6">Jumo to page 1</a>
        </div>
        <div class="block">
            <a href="#page2">Jumo to page 2</a>
        </div>
        <div class="block">
            <a href="#page3">Jumo to page 3</a>
        </div>
    </div>
    <div id="page2" data-page-number="2"  class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)"></div>
    <div id="page3" data-page-number="3"  class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
    <div id="page4" data-page-number="4"  class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
    <div id="page5" data-page-number="5" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
    <div id="page6" data-page-number="6" class="swiper-slide"><h1>THIS IS PAGE 6</h1></div>
    </div>

    <div class="swiper-pagination swiper-pagination-white"></div>

    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
</div>

<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
    effect: 'fade'
});
</script>

Jsfiddle 在这里 https://jsfiddle.net/yuv72u60/

寻求帮助!

谢谢

Answer 1

HTML

            <div class="block">
                <a href="1">Jumo to page 1</a>
            </div>
            <div class="block">
                <a href="2">Jumo to page 2</a>
            </div>
            <div class="block">
                <a href="3">Jumo to page 3</a>
            </div>

JS

$(".block a").click(function(){

   var index=$(this).attr('href');
    swiper.slideTo(index);
});

The above mentioned are changes in have made to your JS fiddle in the HTML and JS section. index in the above js is the position of your page.

DEMO

There is an API in Slider itself for your requirement I have updated your Fiddle slightly for that API to work