带有跳转到幻灯片的 jQuery 图像滑块

Question

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

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

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

    <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);
});

上面提到的是在HTML 和JS 部分中对您的JS fiddle 所做的更改。上面js中的index是你页面的位置。

DEMO

Slider 本身有一个 API 可以满足您的要求，我已经稍微更新了您的 Fiddle 以使该 API 能够正常工作