web-dev-qa-db-ja.com

スリックスライダーの幅が間違っている

初期化時や画面解像度を変更すると、滑らかなスライダーの幅が正しくなくなります。

私のjs：

$('.slider').slick({
    infinite: false,
    speed: 300,
    initialSlide: 1,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 650,
        settings: {
            initialSlide: 2,
            slidesToShow: 1
        }
    }]
});

私のCSS：

.sub-slider {
    width: 100%;
    display: flex; 
    flex-flow: column;

    .slider {
        display: flex;   
        flex-flow: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        min-width:500px;

        .sub-box {
            text-align: center;
            padding-top: 45px;
            cursor:pointer;

            .title {
                color: #6deca0;
                font-family: "AmsiProNarw", sans-serif;
                font-size: 48px;
                font-style: italic;
                font-weight: 800;
            }
            .price {
                color: #393939;
                font-family: "AmsiProNarw", sans-serif;
                font-size: 18px;
                font-style: italic;
                font-weight: 800;
            }
            .sub-slider-btn {
                margin: 60px 20px;
                border-color: #eaeaea!important;
                background-color: #fdfdfd!important;
                color: #686868!important;
            }
        }

        .sub-box:hover { 
            transition: border .2s;            
            border-bottom: 14px solid #6deca0;
            .sub-slider-btn{
                border-color: #6deca0!important;
                background-color: rgba(108,235,159,.2)!important;
                color: #393939!important;
            }
        }
    }

    .sub-slider-confirmation-btn-wrp { 
        align-self: center;
        display: none;
        .sub-slider-confirmation-btn {
            cursor:pointer;
            $margin: 20px;
            $height: 45px;
            height: $height;
            width: 80px;
            border: 1px solid #ccc;
            border-radius: 8px;
            margin: $margin $margin $margin $margin;
            text-align: center;
            line-height: $height;  
            font-weight: 800;
        }
    }

}

slidesToShow: 3を指定した場合でも、このように読み込まれます。

slider error

次に、resposiveに変更すると、次のようになります。 enter image description here

これを修正する方法がわかりません。私は修正なしでこれらを読みました：

初期化時にスリックスライダーの間違った幅

滑らかなカルーセルは初期化時に間違った幅をロードします

https://github.com/kenwheeler/slick/issues/79

https://github.com/kenwheeler/slick/issues/118

https://github.com/kenwheeler/slick/issues/2167

編集：

私はフィドルを作りました https://jsfiddle.net/simeydotme/fmo50w7n/

それはフィドルで動作するようですが、私のサイトでは動作しません。多分私はいくつかの悪いCSSを継承しますか？しかし、私はこれを5時間デバッグしようとしています。そして、私は解決策を見つけることができません。

javascriptjqueryhtmlcssslick.js
6
Felix Rosén

私も同じ問題に遭遇しました-スライダートラックの幅が30,000px幅を超えて大きすぎます。スペンサーリスマンの回答を読んだ後、マークアップを確認したところ、スライダーをラップするdivにrowクラスを適用していること、そしてbootstrap 4を使用しているため、デフォルトの_display:flex_プロパティを行クラスで使用すると、スライド要素で予期しない出力が発生していました。

ラッピング行div内にcolを追加すると、問題が解決しました。

_<div class="row">
    <div class="col-12">
       ../slider markup
    </div>
</div>
_

これはopの問題に直接関連しているわけではないかもしれませんが、他のユーザーが私と同じような問題に遭遇してこのスレッドを見つけた可能性があるため、投稿すると思いました。

14
Eddie Padin

私はこれと同じ問題を抱えていて、私が作成していないスタイルシートから継承されたいくつかの不良CSSも処理していました。私の場合、2つの問題が見つかりました。

  1. 本文には表示の宣言がありました：テーブル
  2. .page（ページラッパー）の表示：インラインブロック

だから私は、滑らかなスライダーがテーブルまたはインラインブロックとして表示されている要素の中にネストされていないことを確認するためにチェックします

4
Spencer Rysman

Bootstrap4、slick（およびowlCarousel）でコンテナーに10,000px以上の幅を設定して、<768pxの画面でのみ同じ問題が発生します。問題は、bootstrapコンテナー（.container）に幅プロパティ<768pxがないため、100％に設定して問題を解決することです。

1
Pavel L.

短い答え：

スリックスライダーがdisplay: blockのコンテナー内にあることを確認してください

長い答え：

新しいcssクラス.gridを作成した後も同じ問題が発生しました。

.grid { display: grid; }

スリックスライダーは既にこのクラスのコンテナー内にありますが、クラスは以前から存在しており、以前はdisplay: blockであったため、上書きによって問題が発生していました。

0
Black

スペンサー・リスマンの答えは私にとても役に立ちました。 Sharepoint 2013で滑らかなスライダーを埋め込むのに問題があり、Webパーツ（ネストされたdivのセットになる）がdisplay：tableおよびdisplay：table-cellとして定義されていることがわかりました。表示するスタイルを変更することにより、ブロック、私の滑らかなスライダーは正しく機能しました。

明確にするために、私の問題は同様でした：スライダートラックの幅が非常に広くなり（> 10,000ピクセル）、これはChromeとFirefoxの両方の最新の製品バージョンで）です。

長年潜んでいた後、スペンサーに特に感謝したかったので、サインアップしました。これが私が答えをまだ賛成できない理由です。

ありがとう、スペンサー。

0
Ken Abbott