jQuery图像滑块，可滑动

Question

I am trying to create a content slider same as here the only thing is that they have text and images and i want only images.

Basically on first page it shows thumbnails so when you click any of them it jumps to that particular slide.

I have tried and setup the slider with swiper jquery plugin but i couldn't make it to jump to specific slide here is my code:

    <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 here https://jsfiddle.net/yuv72u60/

Seeking help!

Thank you

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