web-dev-qa-db-ja.com

スリックスライダー：矢印を外側ではなく内側に設定する方法

こんにちは私は滑らかなスライダーが本当に使いやすいことがわかり、私が取り組んでいるWebサイトで使用することにしました： http://smallbuildersdev.esy.es/

ページの下部にスライダーが表示されます。問題は1つだけです。矢印をスライダーの内側ではなく、スライダーの内側に配置します（つまり、コンテンツがスライドインすると、非表示のハードエッジからスライドします）。ページの全幅を占有できるように矢印を内側に配置する方法はありますか（スライドするときのハードエッジは表示されません）？スリックスライダーへのリンクは次のとおりです。 http://kenwheeler.github.io/slick/

滑らかなスライダーのWebページも見ると、左/右矢印はスライダーの外側にあります。

jqueryhtmlslider
12
Angel Angeles III

CSSスタイルは簡単に変更できると思います。

.slick-prev {
    left: 100px;
    background: red; /*to notice it, is white*/
}
.slick-next {
    right: 100px;
    background: red; /*to notice it, is white*/
}
16
UberKaeL

zインデックスを追加：UberKaeLによる回答に1を追加して、画像の上に前矢印を強制的に表示します

.slick-prev {
  left: 100px;
  background: red; /*to notice it, is white*/
  z-index: 1;
}
.slick-next {
  right: 100px;
  background: red; /*to notice it, is white*/
}
20
Panoman
.yourclass{
  .slick-prev {
    left: 100px;
    background: white;
  }
  .slick-next {
    right: 100px;
    background: white;
  }
}
1
Gökhan Çınar

受け入れられた回答を試したところ、CSSが有効になっていないことがわかりました。矢印が表示されるようにすることが重要です...

.slick-prev {
    left: 100px !important;
    background-color: red  !important; /*to notice it, is white*/
}
.slick-next {
    right: 100px !important;
    background-color: red  !important; /*to notice it, is white*/
}
1
barrypicker

！importantをスタイルシートに追加する必要がないようにするには、.slick-arrowクラスをCSSに追加します。

.slick-arrow.slick-prev {
  left: 100px;
  background: red; /*to notice it, is white*/
  z-index: 1;
}
.slick-arrow.slick-next {
  right: 100px;
  background: red; /*to notice it, is white*/
}
0
Nate S.