slick.jsを使ってスライドを複数表示させた時、両端の画像がコンテンツ100%の幅にぴったり収まるようにしたい

前提・実現したいこと

下記コードのように、画像を3×2のように配置したスライドを作成しました。
■ □ ■
■ □ ■
↑のように、■の画像はコンテンツ(div)の両端にくっつくような
配置にしたいのですが、
cssで左右のmarginを付けると当たり前ですが、コンテンツの左右に余白ができます。
中央にある□の画像の左右にmarginを付けるか、
左の■にmargin-right、右の■にmargin-leftを付けられたらいいのですが、
できませんでした。

スライド数は可変です。画像の大きさは全て同じです。
ご教授のほどよろしくお願いします。

該当のソースコード

html
1<div style="width:100%" class="wrap">
2 <ul class="slide">
3  <li><a><img src="1.jpg"></a></li>
4  <li><a><img src="2.jpg"></a></li>
5  <li><a><img src="3.jpg"></a></li>
6  <li><a><img src="4.jpg"></a></li>
7  <li><a><img src="5.jpg"></a></li>
8  <li><a><img src="6.jpg"></a></li>
9  <li><a><img src="7.jpg"></a></li>
10  <li><a><img src="8.jpg"></a></li>
11  <li><a><img src="9.jpg"></a></li>
12  <li><a><img src="10.jpg"></a></li>
13 </ul>
14</div>

js
1$('.slide').slick({ 
2    arrows: false,
3    slidesToShow: 3,
4    slidesToScroll: 3,
5    rows:2
6});

css
1.slide li a{
2    display: block;
3    margin: 0 5px;
4}

試したこと

表示されているスライドのdiv要素にslick-activeクラスが付与されていることは
分かったので、jqueryでいろいろ試してみたのですが、出来ませんでした。
よろしくお願いします。

Lhankor_Mhy

2021/12/10 00:54

「コンテンツ(div)」とは、.slide のことでいいですか？

退会済みユーザー

2021/12/10 01:16

ご質問ありがとうございます。 <div class="wrap">の幅に、表示されている最初の画像と最後の画像が両端に揃うようになってほしいです。よろしくお願いします。

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

回答1件

ベストアンサー

コンテナにマイナスマージンを当てるのがいいかと思います。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/art8odcg/

css
1    .slick-slide {
2      display: block;
3      margin: 0 5px;
4    }
5
6    .slide {
7      padding: 0;
8    }
9
10    .slide li {
11      vertical-align: bottom;
12    }
13
14    .slide li a {
15      display: block;
16    }
17
18    .slick-list {
19      margin: 0 -5px;
20    }
21
22    img {
23      width: 100%;
24    }