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小提琴所做的更改。上述index中的js是您网页的位置。

DEMO

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

jQuery图像滑块，跳转到幻灯片

1 个答案: