如何用光滑滑块上的不同图像替换点？

Question

我正在使用光滑的滑块。（文档网站：https://kenwheeler.github.io/slick/）我正在尝试用图像替换点......非常像这样...... https://imgur.com/a/ImODX6R

我不是在寻找悬停功能。我正在寻找常规的光滑滑块功能，但可能有图像（而不是点）代表用户在单击它们时将看到的图像。

我可以想出如何用相同的图像替换所有的点，但这不是我要找的。我需要不同的图片。

<html>
      <head>
        <title>Webpage</title>
       <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
       <link rel="stylesheet" type="text/css" href="slick/style.css"/>
      </head>
     <body>

        <div class="container">
          <div><img  alt="slide" src="images/img1.jpg"></div>
          <div><img  alt="slide" src="images/img2.jpg"></div>
          <div><img  alt="slide" src="images/img3.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">
        $('.container').slick({
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true,
                    arrows: false,
                    speed: 1,
                    touchMove: false,
                    responsive: [{
                        breakpoint: 769,
                        settings: {
                            arrows: false,
                            dots: true,
                            touchMove: true
                        }
                    }]
                });
      </script>
    </body>
</html>

到目前为止，我无法做出我期望的更改，也没有看到任何在线文档可以帮助我解决这个问题。

谢谢。

Answer 1

请仔细查看文档页面。答案已经在那里。只需创建两个不同的滑块，让第二个滑块触发第一个滑块。

 use -> asNavFor

在文档页面中搜索滑块同步。

 $('.slider-for').slick({
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows: false,
 fade: true,
 asNavFor: '.slider-nav'
 });

$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});

编辑固定图像作为导航的第二个选项是 slickGoTo 参数。

      
     jQuery(document).ready(function($) {
          $('.container').slick({
                          slidesToShow: 1,
                          slidesToScroll: 1,
                          infinite: true,
                          dots: true,
                          arrows: false,
                          speed: 1,
                          touchMove: false,
                          responsive: [{
                              breakpoint: 769,
                              settings: {
                                  arrows: false,
                                  dots: true,
                                  touchMove: true
                              }
                          }]
                      });
                
                
             $(document).on("click",".smallnav img",function(){
             var di = $(this).data("index");
             $( '.container' ).slick('slickGoTo', di);

});   
                
                
                });

.smallnav{
position:absolute;top:10px;left:10px;
}
.smallnav img{cursor:pointer;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="container">
          <div><img  alt="slide" src="https://via.placeholder.com/600/808080/808080?Text=1Slideimg"></div>
          <div><img  alt="slide" src="https://via.placeholder.com/600/0000FF/808080?Text=2Slideimg"></div>
          <div><img  alt="slide" src="https://via.placeholder.com/600/ccc/808080?Text=3Slideimg"></div>
</div>

   <div class="smallnav">
   <div><img  alt="slide" src="https://via.placeholder.com/50/999/808080?Text=Slideimg" data-index="0"></div>
          <div><img  alt="slide" src="https://via.placeholder.com/50/999/808080?Text=Slideimg" data-index="1"></div>
          <div><img  alt="slide" src="https://via.placeholder.com/50/999/808080?Text=Slideimg" data-index="2"></div>
   </div>

Answer 2

我着手解决这个问题是为了寻找稍微不同的东西，并想复制我的解决方案以供其他人使用。我想用自定义图标替换这些点，但一直在努力让 CSS 正常工作。以下是解决我的问题的方法。注意：这里是SCSS不是直CSS.

.slick-dots{
    li.slick-active button:before{
      content: url("/path/to/icon.png");
    }
    li button:before{
      content: url("/path/to/icon.png");
    }
  }

如何用光滑滑块上的不同图像替换点？

How can I replace the dots with different images on slick slider?

jquery

slick.js