どのように私のスリックスライダを不自然さを少なくし、すべての幅で動作させることができますか？

私はSlick Carousel（http://kenwheeler.github.io/slick/）を使用してカードスライダーに取り組んでいます。私はそれが無限にループし、カードを積み重ねることなくブラウザの幅を変えて作業したいと思っています。現時点では、ループ上でぎこちない（5つのスライドの後）。どのように私のスリックスライダを不自然さを少なくし、すべての幅で動作させることができますか？

私が偉大な人に助けてくれる人なら、私はCodePenでデモを手に入れました！それが利用可能なスペースと表示したいカードの数のオフ（例えば移動距離など）すべての測定値を計算するので

https://codepen.io/cbg/pen/YQdqPQ

<head> 

    <style type="text/css"> 

     body { 
      margin: 0; 
     } 

     #slider { 
      background-color: #f5f7f9; 
      padding: 80px; 
      overflow: auto; 
     } 

     .service { 
      width: 260px !important; 
      height: 303px; 
      background-color: white; 
      float: left; 
      margin: 0 15px; 
      box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15); 
      border-radius: 4px; 
     } 

     .slick-arrow { 
      display: none !important; 
     } 

     .pod1 { 
      background-image: url(fakepods/pod1.png); 
     } 

     .pod2 { 
      background-image: url(fakepods/pod2.png); 
     } 

     .pod3 { 
      background-image: url(fakepods/pod3.png); 
     } 

     .pod4 { 
      background-image: url(fakepods/pod4.png); 
     } 

     .pod5 { 
      background-image: url(fakepods/pod5.png); 
     } 

    </style> 

</head> 

<body> 

    <div id="slider" class="center slider"> 
     <div class="pod1 service"></div> 
     <div class="pod2 service"></div> 
     <div class="pod3 service"></div> 
     <div class="pod4 service"></div> 
     <div class="pod5 service"></div> 
    </div> 

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 
    <script src="slick.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript"> 
    $(document).on('ready', function() { 

    $(".center").slick({ 
    dots: false, 
    infinite: true, 
    centerMode: true, 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 250, 
    }); 


    }); 
    </script> 

</body>

出典

2017-07-11 C. Gordon

スリックは、あなたのボックスのサイズを変更したいと考えています。カードのCSSの幅に!importantを追加して補正しました。

Slickで戦うのではなく、その機能を使用して必要な幅を取得します。スライダーの幅をカードの幅と余白のN倍に設定します（NはslidesToShowの設定です）。マージンオートを使用して、親要素でそれをセンター：

#slider { 
    padding: 80px; 
    overflow: visible; 
    width:1160px; 
    margin:0 auto; 
}

その後max-width:100%とoverflow:hiddenで容器にそれをラップすることにより、より小さなブラウザウィンドウの幅を調整。

#container{ 
    background-color: #f5f7f9; 
    overflow:hidden; 
    max-width:100%; 
    height:100%; 
}

これは時間の最もに動作します。 Slickはカードを複製して2つのセットがあるように無限ループを作成し、スライダのもう一方の端にカードを無限に移動するように移動します。カードが5枚しかない非常に広い画面では、最後に空白が表示されることがあります。私のペンでは、あなたのカードをコピーしたので、Slickクローンの合計が20になると、slidesToShowが9に増加し、#sliderの幅が適切に上がりました。 true

へ

https://codepen.io/freer4/pen/EXGKXg

あなたはカードが常に中央に配置されていることを確認したい場合は、#containerの内側にあなたの#slider位置を調整することができますし、centerModeを設定

https://codepen.io/freer4/pen/WOLwLe

出典

2017-07-11 20:56:17

グレート答えはあなたに感謝します、それは私にはダウンしていた比較的単純な何かだったことをうれしく思います。私はまだそれが次のセットを生成する方法に問題がある、それはnoti 5番目のアニメーションでceable。あなたが見たいと思ったら私のCodePenを更新しましたか？もう一度ありがとう！ https://codepen.io/cbg/pen/YQdqPQ –

おそらく、私が最初のポッドを現時点で作業している最初のボーダーと整列させようとしているので、それをどのように相殺しているのかは分かりません。 –

@ C.Gordonは、あなたの '＃slider 'がビューポートであると仮定しているので、それだけを認識しています。その問題の回避策については、上記の私のペンを参照してください –

どのように私のスリックスライダを不自然さを少なくし、すべての幅で動作させることができますか？

答えて

関連する問題