Как добавить эскизы к точкам слайдера с указанием текущего слайда

В настоящее время я работаю над новым проектом, для которого нужен слайдер. Я применил slick JS для одного из моих проектов.

Теперь мне нужно добавить эскизы, которые будут отображаться, когда мы навешиваем точки, которые будут ссылаться на слайдер

Например, нажмите на первый палец и слайдер, чтобы перейти к первому слайду,... нажмите на третье и слайды на третий слайд.

HTML

    <html>
      <head>
        <title>My Now Amazing Webpage</title>
       <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
       <link rel="stylesheet" type="text/css" href="slick/style.css"/>
      </head>
     <body>
<!-- THis is the slider code  -->
        <div class="center">
          <div><img  alt="slide 2" src="images/img1.jpg"></div>
          <div><img  alt="slide 2" src="images/img2.jpg"></div>
          <div><img  alt="slide 2" src="images/img3.jpg"></div>
          <div><img  alt="slide 2" src="images/img4.jpg"></div>
          <div><img  alt="slide 2" src="images/img5.jpg"></div>
        </div>

       <script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script>
       <script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
       <script type="text/javascript" src="slick/slick.min.js"></script> 

       <script type="text/javascript">
        $('.center').slick({

            centerMode: true,
            centerPadding: '60px',
            slidesToShow: 1,
            dots: !0,   /* It is for the navigation dots  */
            draggable: !1,
            responsive: [
             {
                 breakpoint: 768,
                 settings: {
                     arrows: false,
                     centerMode: true,
                     centerPadding: '40px',
                     slidesToShow: 1
                 }
             },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
            ]
        });
      </script>
    </body>
</html>

Ответы

Ответ 1

Вы можете заменить точки на собственные миниатюры. Вам нужно будет добавить миниатюры где-нибудь (например, в скрытом div внутри обложки слайда изображения. См. Код для справки:

$('.slideme').slick({
  dots: true,
  customPaging: function(slider, i) { 
    // this example would render "tabs" with titles
    return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>';
  },
});

Вам также понадобится настроить собственный CSS-плейер slick для удаления точек и добавить больше места и стилей для ваших эскизов.