Can i use different images for each custom dots for my slick slider?

i have a question for slick slider veterans:

I want to put custom images for my dots on a slick slider, but i want to use different images for my slider dots. So for example i have 5 slides, and i want my 5 dots to have seperate images, so 5 different images (10 if i use different ones for active and inactive state)

Can anyone advice me on this how i approach this? I wanted to try with this here, but then i realised that it only works with the same image for each dot:

 $('.productslider').slick({
                lazyLoad: 'ondemand',
                dots: true,
                customPaging : function(slider, i) {
                    return '<a href="#"><img src="images/realmix/products/freshness_energy_active.png" /><img src="images/realmix/products/freshness_energy_active.png" /></a>';
                },
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
                adaptiveHeight: true,
                infinite: true,
                responsive: [
                    {
                        breakpoint: 400,
                        settings: {
                            mobileFirst: true,
                            centerMode: true,
                            centerPadding: '10px',
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            infinite: true,
                            adaptiveHeight: true,
                            dots: true

                        }
                    }
                ]
              });  

Answer

You could assign a custom image url as a data attribute to your slide div, and then on slick init, loop through your dots, grab the custom dot image url and render it into the slick dot by slide id.

Notice in my example I am setting a dot image in the .slick-slide div using this data attribute…

data-dot-img="https://i.imgur.com/6X5GKWJ.png"

Here is a fiddle… https://jsfiddle.net/joshmoto/fxy7gudv/

See working example below…

// my slick slider options
const options = {
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true
};

// my slick slider as const object
const mySlider = $('.slider').on('init', function(slick) {

  // set this slider as const for use in set time out
  const slider = this;
    
  // slight delay so init completes render
  setTimeout(function() {

    // dot buttons
    let dots = $('.slick-dots > LI > BUTTON', slider);

    // each dot button function
    $.each(dots, function(i,e) {

      // slide id
      let slide_id = $(this).attr('aria-controls');
      
      // custom dot image
      let dot_img = $('#'+slide_id).data('dot-img');
      
      $(this).html('<img src="' + dot_img + '" alt="" />');

    });

  }, 100);


}).slick(options);

body {
  margin: 0;
  padding: 20px;
}

.slider .slick-slide > A {
  display: block;
  position: relative;
  height: 132px;
  width: 100%;
}

.slider .slick-slide > A > IMG {
  position: absolute;
  width: 100%;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.slider .slick-dots {
  bottom: -37.5px;
}

.slider .slick-dots LI {
  width: 75px;
  height: 75px;
  opacity: .8;
}

.slider .slick-dots LI.slick-active {
  opacity: 1;
}

.slider .slick-dots LI.slick-active BUTTON,
.slider .slick-dots LI:hover BUTTON {
  opacity: 1;
  transform: scale(1,1);
}

.slider .slick-dots LI BUTTON {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  transition: all .5s ease;
  transform: scale(.75,.75);
}

.slider .slick-dots LI BUTTON IMG {
  display: block;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.slider .slick-dots LI BUTTON:before {
  display: block;
  position: relative;
  content: '';
  width: 100%;
  padding-top: 100%;
  height: auto;
}

<div class="slider">
  <div data-dot-img="https://i.imgur.com/6JplNl6.png">
    <a href="https://i.imgur.com/q5Y5RCH.png">
      <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
    </a>
  </div>
  <div data-dot-img="https://i.imgur.com/6X5GKWJ.png">
    <a href="https://i.imgur.com/8HjXPXD.png">
      <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
    </a>
  </div>
  <div data-dot-img="https://i.imgur.com/SefTwI1.png">
    <a href="https://i.imgur.com/vUDcfcy.png">
      <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
    </a>
  </div>
  <div data-dot-img="https://i.imgur.com/IqLrd0o.png">
    <a href="https://i.imgur.com/okTDHas.png">
      <img src="https://i.imgur.com/okTDHas.png" alt="" />
    </a>
  </div>
</div>

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