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

【问题标题】：how to add thumbnails to dots of slick slider mentioning the current slide如何将缩略图添加到提到当前幻灯片的光滑滑块点
【发布时间】：2014-09-16 20:57:03
【问题描述】：

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

【问题讨论】：

我不完全知道怎么做，但你可以做的是为每个点添加一个单独的 onmouseover 属性，这将调用所需的 javascript 函数。然后在函数中获取鼠标指针的 X,Y 坐标并在 X,Y 坐标处显示缩略图。
见以下链接。实现 slick 概念非常有用kenwheeler.github.io/slick

标签： javascript jquery 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>';
  },
});

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

【讨论】：

我认为您实际上不需要做任何事情来“消除点”，请看几个示例：jsfiddle.net/oL5bjae1 和 jsfiddle.net/simeydotme/9nm4ctv9
我在动态轮播中使用这个，当幻灯片图像被删除时，旧的缩略图不会被删除。创建新的自定义分页时，如何“清除”旧的自定义分页？目前面临一个堆积，当旧幻灯片被删除时，它们的缩略图不会

【解决方案2】：

像下面这样向幻灯片添加数据属性

<div class="slide" data-thumb="{{assets}}/images/image-name.jpg"></div>

然后在脚本中添加customPaging 函数，如下所示

$('.slider').slick({
  dots: true,
  customPaging: function(slider, i) { 
                    return '<button><span class="thumbImg" style="background-image:url('+$(slider.$slides[i]).data('thumb')+');"></span></button>';
                },
});

【讨论】：