web-dev-qa-db-ja.com

スリックカルーセルアイテム間にスペースを追加する方法

2つの滑らかなカルーセルアイテムの間にスペースを追加したいのですが、パディングのスペースは必要ありません。これは、要素のサイズを小さくしているためです（それは望ましくありません）。

enter image description here

    $('.single-item').slick({
        initialSlide: 3,
        infinite: false
    });
.slick-slider {
    margin:0 -15px;
}
.slick-slide {
    padding:10px;
    background-color:red;
    text-align:center;
    margin-right:15px;
    margin-left:15px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-color:gray;">
            <div class="slider single-item" style="background:yellow">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>
</div>

どういうわけか、私は両側からスペースを得ている、それを削除しようとしています。

jqueryhtml5css3jquery-pluginsslick.js
33
Sopo

うん、私は問題の解決策を見つけました。

  • 作成余分な幅を持つ1つのスライダーボックス両側から（これを使用して両側から項目スペースを追加できます）。
  • 作成内部アイテムコンテンツ両側から適切な幅とマージンで（これは実際のラッパーサイズである必要があります）
  • 完了
1
Sopo
    /* the slides */
  .slick-slide {
    margin: 0 27px;
  }
  /* the parent */
  .slick-list {
    margin: 0 -27px;
  }

この問題は、プラグインのgithubで問題（＃582）として報告されましたが、このソリューションでも言及されています（ https://github.com/kenwheeler/slick/issues/582 ）

69
Dishan TD

@Dishan TDの答えはうまく機能しますが、左マージンのみを使用するとより良い結果が得られます。

そして、これを他のすべての人に明確にするために、あなたは両方の反対の数字に注意を払わなければなりません：27と-27

  /* the slides */
  .slick-slide {
    margin-left:27px;
  }

  /* the parent */
  .slick-list {
    margin-left:-27px;
  }
10
Pablo S G Pacheco

滑らかなスライドには内側のラッピングdivがあり、これを使用してデザインを壊すことなくスライド間の間隔を作成できます。

.slick-list {margin: 0 -5px;}
.slick-slide>div {padding: 0 5px;}
6
Sushil Thapa

Cssを修正するだけです：

/* the slides */
.slick-slider {
    overflow: hidden;
}
/* the parent */
.slick-list {
    margin: 0 -9px;
}
/* item */  
.item{
    padding: 0 9px;
}
2
Anh Hoai Vui Le

追加

centerPadding: '0'

スライダーの設定は次のようになります。

$('.phase-slider-one').slick({
     centerMode: true,
     centerPadding: '0',
     responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}]
});

ありがとうございました

1
MJ Mikz

最新バージョン以降は、スライドにmarginを追加するだけです。

.slick-slide {
  margin: 0 20px;
}

Slickの計算はoutterHeight要素に基づいているため、負のマージンは一切必要ありません。

1
Orlandster

擬似クラスの助けを借りて、最初と最後の子からマージンを削除し、スクリプトで adaptive height trueを使用しました。これを試してください fiddle

もう1つ デモ

 $('.single-item').slick({
        initialSlide: 3,
        infinite: false,
        adaptiveHeight: true
    });
1
stanze

スライドの間隔を大きくし、スライドの幅を狭めたくない場合は、表示するスライドを少なくする必要があります。そのような場合は、設定を追加するだけでスライドを少なく表示できます

    $('.single-item').slick({
      initialSlide: 3,
      infinite: false,
      slidesToShow: 3
    });

別のオプションは、表示するスライドの量を設定せずにcssでスライドの幅を定義することです。

0
Asaf David

Dishan TDによる投稿に基づく改善（垂直マージンも削除されます）：

  .slick-slide{
    margin-left:  15px;
    margin-right:  15px;
  }

  .slick-list {
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: none;
  }

注：私の場合、左矢印をクリックするには、ポインターイベントが必要でした。

0
ling

：first-child＆：last-childのような疑似クラスを使用して、最初と最後の子から余分なパディングを削除してください。

生成された滑らかなスライダーのコードを調べて、その上のパディングを削除してみてください。

願っています、助けてください!!!

0
Manish Kumar

たとえば、次のdata-attrをプライマリスリックdivに追加します：data-space = "7"

                    $('[data-space]').each(function () {
                        var $this = $(this),
                            $space = $this.attr('data-space');

                        $('.slick-slide').css({
                            marginLeft: $space + 'px',
                            marginRight: $space + 'px'
                        });

                        $('.slick-list').css({
                            marginLeft: -$space + 'px',
                            marginRight: -$space/2 + 'px'
                        })
                    });
0
Krzysztof