CODEWITHSUNDEEP
jqueryslick.js
loop123123
loop123123

Reputation: 21

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

I'm using slick slider. (documentation website: https://kenwheeler.github.io/slick/ ) I'm trying to replace the dots with images.... pretty much like this... https://imgur.com/a/ImODX6R

I'm not looking for hover functionalities. I'm looking for the regular slick slider functionality but with the possibility of having images (instead of dots) that represent the images that the user will see when clicking them.

I could figure out how to replace all the dots with the same image, but that's not what I'm looking for. I need different images.

<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>

So far, I couldn't make the changes I'm expecting and haven't seen any documentation online that help me with this issue.

Thanks.

Upvotes: 1

Views: 9206

Answers (2)

KPacheco
KPacheco

Reputation: 41

I landed on this question looking for something slightly different and wanted to copy my solution in for anyone else looking. I wanted to replace the dots with custom icons but was struggling with getting the CSS to work. Below is what solved my issue. Note: this is SCSS not straight CSS.

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

Upvotes: 2

Steffen G&#246;rg
Steffen G&#246;rg

Reputation: 372

Please take a closer look to the documentation page. The answere is already there. Just create two different sliders and let the second slider trigger the first slider. 

 use -> asNavFor

Search for slider syncing in the documentation page.

 $('.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
});

EDIT Second Option for fixed images as Navigation is the slickGoTo parameter.

      
     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>

Upvotes: 2

Related Questions