Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add thumbnails to dots of slick slider mentioning the current slide

I am currently working on a new project which required a slider. I have implemented slick JS for one of my project.

Now I need to add thumbnails which will appear when we hover the dots which will link to the slider

For example, click on first thumb and slider will advance to first slide,....click on third and slides to third slide.

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>
like image 549
KKGupta Avatar asked Jul 25 '14 04:07

KKGupta


People also ask

How do I change the position on my slick slider dots?

You can use "appendDots: $(Element)" in the Slick settings. It will append the dots to that element. You can place that element at any location using normal CSS. If you want it over the slide then you can use absolute or relative positioning on the element.


1 Answers

You may replace dots with custom thumbnails. You would need to add thumbnails somewhere (for example, in a hidden div inside the image slide wrapper. See the code for reference:

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

You would also need tweak up the native Slick pager css to remove dots and add more space and styles for your thumbnails

like image 100
lifecoder Avatar answered Oct 16 '22 15:10

lifecoder