slickで巡回させる画像にだけリンクを張るにはどうしたらよいですか？

Question

3枚の画像を横に並べてslickで巡回させると、画像にだけリンクが張られるのではなく、画像と画像の間の空白部分にもリンクが張られてしまいます。画像にだけリンクを張るにはどうしたらよいですか？

<div class="col1 single"> <li ><a href="https://xxx1/"><img src="/img/yyy1.jpg"></a></li> <li ><a href="https://xxx2/"><img src="/img/yyy2.jpg"></a></li> <li ><a href="https://xxx3/"><img src="/img/yyy3.jpg"></a></li> </div> <script type="text/javascript"> $(document).ready(function(){ $('.single').slick({ dots: true, arrows: true, slidesToShow: 3, }); }); </script>

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あとこれは「巡回」ではなく「周回」だと思います。
スライダーなので。あちこち見回ってるわけじゃないですからね。

[m.ts10806]

そもそもliがulの配下になく、divが張られてる時点でマークアップとして間違ってるような。

Answer 1

クリッカブルマップで対処できました。

<li><img src="/img/yyy.jpg" alt="" usemap="#image-map"> <map name="image-map"> <area href="https://haniwaman.com/" coords="0,0,200,320" shape="rect"> </map> </li>