スライダーSlickでのデザイン崩れ

Question

前提・実現したいこと

テキストと画像を含む3つの<div>が、widthに応じてサイズを可変し、左右の画像が少し見えながらスライドすること

現状の課題

・<ul>内はサイズが可変するが、<img>の大きさが変わらず、widthを変えるとレイアウトが崩れてしまう
・centerMode: trueとしているのに、右の画像しか表示されない
（Developer Toolで確認したところ、画像の大きさ分のスペースはとられているみたいですが、表示されません。）

該当のソースコード

    <div class="slider">
        <div class="contents">
            <ul class="detail">
                <li class="type_name">タイプ</li>
                <li>詳細説明１</li>
                <li>詳細説明２</li>
                <li>
                    <a class="btn">
                        <p>ボタン</p>
                    </a>
                </li>
            </ul>
            <img src="img_a.png">
        </div>
        <div class="contents">
            <ul class="detail">
                <li class="type_name">タイプ</li>
                <li >詳細説明１</li>
                <li>詳細説明２</li>
                <li>
                    <a class="btn">
                        <p>ボタン</p>
                    </a>
                </li>
            </ul>
            <img src="img_a.png">
        </div>
        <div class="contents">
            <ul class="detail">
                <li class="type_name">タイプ</li>
                <li>詳細説明１</li>
                <li>詳細説明２</li>
                <li>
                    <a class="btn">
                        <p>ボタン</p>
                    </a>
                </li>
            </ul>
            <img src="img_a.png">
        </div>
    </div>

    <div class="slider_thumb">
        <img src="img.png">
        <img src="img.png">
        <img src="img.png">
    </div>

  .detail{
    float: left;
    text-align: center;
  }
    .btn p{
      display: inline-block;
      margin-top: 74px;
      padding: 20px 56px;;
    }
    .type_name{
      padding-bottom: 40px;
    }
  .slider_thumb{
    max-width: 350px !important;
    margin: 0 auto;
  }

    <script>
        $('.slider').slick({
            arrows: false,
            dots: false,
            centerMode: true,
            centerPadding: '200px',
            asNavFor:'.slider_thumb',
            infinite: false
        });
    </script>
    <!--サムネイル-->
    <script>
        $('.slider_thumb').slick({
            asNavFor:'.slider',
            focusOnSelect: true,
            slidesToShow: 3,
            slidesToScroll:1
        });
    </script>

試したこと

・class="slider"直下が<img>のみの場合は正常に動くが、<div>を加えその下に<img>を置くと、
左の画像が見えなくなってしまい、右のみ見えることを確認した
・slickのデザイン崩れに関する記事を探した
リンク内容
リンク内容
リンク内容

プログラミング経験が浅く不足情報等もあるかもしれませんが、とても困っているのでどうかお知恵をお貸しください！

Comments

[Lhankor_Mhy]

「widthに応じてサイズを可変」について、もう少し詳しくお願いします。
ご提示のCSSにはwidthの指定がありませんでしたので、なにに応じるべきか不明です。

[Lhankor_Mhy]

あ、.contentsの幅、という意味かな？

[Lhankor_Mhy]

いや、違うか、「3つの<div>が、widthに応じてサイズを可変」とあるが、「3つの<div>」とは.contentsのはず……？

[shippei]

Lhankor_Mhy様
質問に対してコメントをいただき、ありがとうございました。
お返事が大変遅くなってしまい、申し訳ありませんでした。

お気づきの通り、「widthに応じてサイズを可変」という記述は誤っており、
正しくは、「ウィンドウサイズ幅の変更に伴って<div>のwidthを可変」したかったです。
私の勉強不足と勘違いで適切な表現ができず、
Lhankor_Mhy様にお手数おかけしてしまい申し訳ありませんでした。

Answer 1

こんにちは、
解釈が正しいか分かりませんが、
slick.cssを読み込んだあとに、以下を記述すればよいかもしれません。

.slider.slick-initialized .slick-slide {
    display: flex;
    align-items: flex-start;
    justify-content: space-around; /*space-between*/
}
.slick-slide img {
    flex: 1 1 auto;
    width: 0%;
}

Comments

[shippei]

fake_shibe様
わたしの説明不足な質問に対しご丁寧にお答えいただき、ありがとうございました。
お返事が大変遅くなってしまい、申し訳ありませんでした。

いただいたコードを参考にしたところ、無事に希望通りの実装ができました。
.slick-slideに対してcssを記述するという意識が全くなかったため
非常に参考になりました。
本当にありがとうございました！