現在、タグの勉強中です。サムネイルがきちんと写るようにスライドして欲しいのですがサムネイルが空白になってスライドしました。ご教示いただきたく存じます。　どうぞ宜しくお願いいたします。

ボールドテキスト
現在、タグの勉強中です。サムネイルがきちんと写るようにスライドして欲しいのですがサムネイルが空白になってスライドしました。
ご教示いただきたく存じます。
どうぞ宜しくお願いいたします。

<div class="slider">  
     <div>
<img src="https://stat.ameba.jp/user_images/20210510/01/t1045-reo/c8/a4/j/o0420042014939598341.jpg"></div>
     <div>
<img src="https://stat.ameba.jp/user_images/20210510/01/t1045-reo/73/1e/j/o0420042014939599576.jpg"></div>
     <div>
<img src="https://stat.ameba.jp/user_images/20210509/16/t1045-reo/e6/23/j/o0420042014939292080.jpg"></div>
     <div>
<img src="https://stat.ameba.jp/user_images/20210510/02/t1045-reo/2f/11/j/o0420042014939611804.jpg"></div>
     <div>
<img src="https://stat.ameba.jp/user_images/20210615/19/t1045-reo/ba/07/j/o0420042014957912556.jpg"></div>
    
</div>

<div class="out"></div>

<style>

  .slider{
	width:500px;
	margin:0 auto;
  }

  img{
	width:100%;
  }
  
  .slick-slide{
	  height:auto!important;
  }

  .slick-next{
    right:0!important;
  }
  .slick-prev{
    left:0!important;
  }
  .slick-arrow{
    z-index:2!important;
  }


.slick-dots{
	bottom:-60px!important;
}


.slick-dots li{
    width: 150px!important;
    height:150px!important;
    margin: 0 0px!important;
    box-sizing:border-box;
}



.slick-dots li button{	
    height: 100%!important;
	width: 100%!important;
}



.slick-dots li button:before{
	content:""!important;
}



.slick-dots li.slick-active{
	border:3px solid #ffb6c1;
}


</style>


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


<script>
	$('.slider').on('init', function (event, slick, currentSlide, nextSlide) {
		slideItem=$(".slick-slide")
		for(let i=0; i < slick.slideCount; i++){
			let slideImg = slideItem.filter(function(){return($(this).attr('slick-index') === i)}).find("img").clone()
			console.log(slideImg)
			let dot = $(".slick-dots").find("li").eq(i).find("button")
			let src = slideImg.attr('src')
			dot.css("background",`url(${src})`)
			dot.css("background-size","contain")
		}
	});

	$('.slider').slick({
	    autoplay: true,        
	    autoplaySpeed: 2000,　 
	    speed: 600,		　 
	    dots: true,　　　　　　
	    arrows: true,         
	    infinite: true,　　　　
	    pauseOnHover: false,   
	});
</script>




コード

行動規範の内容に同意します

回答1件

参考にされたのはこちらでしょうか？
slick.jsのドットをカスタマイズしてサムネイルスライダー作ってみた|もぐブログ

おそらく記述ミスです。

diff
1  $('.slider').on('init', function (event, slick, currentSlide, nextSlide) {
2    slideItem=$(".slick-slide")
3    for(let i=0; i < slick.slideCount; i++){
4-     let slideImg = slideItem.filter(function(){return($(this).attr('slick-index') === i)}).find("img").clone()
5+     let slideImg = slideItem.filter(function(){return($(this).data('slick-index') === i)}).find("img").clone()
6      let dot = $(".slick-dots").find("li").eq(i).find("button")
7      let src = slideImg.attr('src')
8      dot.css("background",`url(${src})`)
9      dot.css("background-size","contain")
10    }
11  });

この部分も全角空白が混ざっていますので削除した方が良いです。
空白が見えるようなエディタやフォントを使ってみてください。

javascript
1    $('.slider').slick({
2        autoplay: true,        
3        autoplaySpeed: 2000,　 
4        speed: 600,        　 
5        dots: true,　　　　　　
6        arrows: true,         
7        infinite: true,　　　　
8        pauseOnHover: false,   
9    });