Question

我目前正在开发一个需要滑块的新项目。我为我的一个项目实现了光滑的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>

Answer 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>';
  },
});

您还需要调整本机Slick寻呼机css以删除点并为缩略图添加更多空间和样式

如何将缩略图添加到光滑滑块的点，提及当前幻灯片

1 个答案: