スライダーをコンテンツ幅一杯に表示したい

ー前提条件ー
slickでスライダーを実装しようとしています。
3枚のスライダーで、1枚ずつスクロールされるようにしています。

HTML
1                <div class="slideA">
2                    <div class="slideA-area">
3                        <div class="slick-slider slide1">
4                            <div class="slick-slide">
5                                <a href="/">
6                                    <p class="slideA-title">example</p>
7                                    <img class="has-top-bottom l-mg0-auto" src="example.jpg" alt="">
8                                </a>
9                            </div>
10
11                                                        <div class="slick-slide">
12                                <a href="/">
13                                    <p class="slideA-title">example</p>
14                                    <img class="has-top-bottom l-mg0-auto" src="example.jpg" alt="">
15                                </a>
16                            </div>
17                            <div class="slick-slide">
18                                <a href="/">
19                                    <p class="slideA-title">example</p>
20                                    <img class="has-top-bottom l-mg0-auto" src="example.jpg" alt="">
21                                </a>
22                            </div>
23                            <div class="slick-slide">
24                                <a href="/">
25                                    <p class="slideA-title">example</p>
26                                    <img class="has-top-bottom l-mg0-auto" src="example.jpg" alt="">
27                                </a>
28                            </div>
29                        </div>
30                        <div class="prev"><img src="left.svg"></div>
31                        <div class="next"><img src="right.svg"></div>
32                    </div>
33                </div>

css
1.slideA{
2　　width:100%;
3    padding-right: 15px;
4    padding-left: 15px;
5    margin-right: auto;
6    margin-left: auto;
7}
8.slick-slide{
9 marigin-right:20px;
10}

このようなコードを使い、コンテンツ幅いっぱいのスライダーを作ろうと考えています。
class="slideA"　は　width100%です。
ですが、スライドに間隔を入れようと.slick-slideにmargin-rightを入れてしまうと、コンテンツ幅いっぱいにスライダーが表示されず、
全部にmargin-rightが入り、コンテンツ幅いっぱいのスライダーが実装できません。

他にも色々オプションを調べたのですが、実装できず。。。
どのようにすれば、左右にmarginが入らず、コンテンツ幅ピッタリのスライダーが実装できるのでしょうか？
ご享受お願いいたします。

Yorrie

2020/05/20 10:20

他のCSSに影響されている可能性も十分考え得るので、出せるコードはできるだけ出しておきましょう。

arraky

2020/05/20 12:15

はい！ありがとうございます！

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

回答1件

ベストアンサー

slickでのスライド間余白のあけ方は割と話題になっているようで、検索したらstackoverflowの記事を見つけました。

How add spaces between Slick carousel item

これをもとに最低限再現できるコードが以下になります。

html
1<div id="container">
2  <ul class="slick01">
3    <li><div class="slick_item"><img alt="画像1" src="https://placehold.jp/200x200.png?text=Image1" /></div></li>
4    <li><div class="slick_item"><img alt="画像1" src="https://placehold.jp/200x200.png?text=Image2" /></div></li>
5    <li><div class="slick_item"><img alt="画像1" src="https://placehold.jp/200x200.png?text=Image3" /></div></li>
6  </ul>
7</div>
8

css
1/* コンテンツ幅いっぱいになっているのを確認するためborderを入れている */
2#container{
3  width: 100%;
4  border: solid 1px red;
5}
6
7ul {
8  padding: 0;
9  margin: 0;
10}
11.slick01 img{
12  width: 100%;
13  height: 200px;
14}
15  /* 以下2つの要素がキモ */
16  /* the slides */
17  .slick-slide {
18    margin-left:27px;
19  }
20
21  /* the parent */
22  .slick-list {
23    margin-left:-27px;
24  }