slickプラグインがスマホでうまく表示されない

slickのカルーセルをスマホで正しく表示させたい

スマホで下記のように表示させたい

発生している問題

現在下記のように表示されている

画像を見て頂くとわかるように、該当エリアで本来横並びにならなければ行けない画像がカラム落ちしてしまっている。

使用しているコード

php
1<div class="carousel">
2<?php 
3$images = get_field('カルーセル','36');
4$size = 'full';
5//var_dump($images);
6foreach( $images as $image ){ ?>
7	<div class="image">
8	<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
9	</div>
10<?php }
11?>
12</div>

js
1    <script>
2    $(document).ready(function(){
3        $('.carousel').slick({
4            slidesToShow: 6,
5            slidesToScroll: 2,
6            autoplay: true,        // 自動再生
7            autoplaySpeed: 3000,   // 自動スライド切り替え速度
8            responsive: [
9                {
10                breakpoint: 640,
11                    settings: {
12                        variableWidth: true,
13                        slidesToShow: 2,
14                        slidesToScroll: 1,
15                        centerMode: true,
16                        autoplay: true,
17                        centerPadding: "10%",
18                        variableWidth: true 
19                    }
20                }
21            ]
22        });
23    });
24    </script>

試したこと

一通りCSS触ってみたが、原因がよくわかりませんでした。
また、slickの公式ページのsetting欄の設定は一通り試しましたがうまくいきませんでした。

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

回答2件

ベストアンサー

自己解決しました。
どうやら、下記のCSSが原因のようでした。

css
1*{ max-width:100%;}

上記表記を削除した所、問題なく表示されるようになりました。

投稿2023/06/23 01:18

退会済みユーザー

総合スコア0

この回答はGPT-4による自動生成回答です

スマホでの表示が正しくない原因は、おそらくCSSの設定が不足しているか、または競合している可能性があります。以下の手順で問題を解決してみてください。

まず、slickのCSSファイルが正しく読み込まれていることを確認してください。<head>タグ内に以下のようにslickのCSSファイルを読み込んでいるか確認してください。

html
1<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
2<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

次に、カルーセルの画像に対して適切なCSSスタイルを適用しているか確認してください。以下のようなCSSスタイルを追加してみてください。

css
1.carousel .image {
2  width: 100%;
3  padding: 0 5px;
4}
5
6.carousel img {
7  width: 100%;
8  height: auto;
9}

最後に、slickの設定でvariableWidthが2回設定されているので、1つ削除してください。

js
1$(document).ready(function(){
2    $('.carousel').slick({
3        slidesToShow: 6,
4        slidesToScroll: 2,
5        autoplay: true,        // 自動再生
6        autoplaySpeed: 3000,   // 自動スライド切り替え速度
7        responsive: [
8            {
9            breakpoint: 640,
10                settings: {
11                    variableWidth: true,
12                    slidesToShow: 2,
13                    slidesToScroll: 1,
14                    centerMode: true,
15                    autoplay: true,
16                    centerPadding: "10%"
17                }
18            }
19        ]
20    });
21});