web-dev-qa-db-ja.com

滑らかなスライダードットの再配置

私のプロジェクトでは、滑らかなスライダープラグインを使用しています（ http://kenwheeler.github.io/slick/ ）。スリックドットを再配置できるかどうか疑問に思っていました。デフォルトでは、スリックスライダーが適用されているdivコンテナーの下に表示されます。ここで達成したいのは、スライディングdivブロック内に滑らかなドットを配置することです。矢印でカスタムクラス名を参照できるので、矢印でこれを実現するのに問題はありませんでした。
私のhtmlは次のようになります：

<div class="slider-fade">
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
</div>

私のJS設定は次のようになります：

$('.slider-fade').slick({
 autoplay: true,
 autoplaySpeed: 3000,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 prevArrow: $('.prev'),
 nextArrow: $('.next'),
 dots: true
});

先ほど触れたように、ドット全体の下に表示されますslider-fadeクラスですが、たとえばtext-boxクラス。これは達成可能ですか？

視覚的表現： http://i.stack.imgur.com/jmocB.png

ブロック内の矢印の下にドットを表示することを目的としています。

jqueryhtmlsliderslick.js
8
Chris Birch

Slickは、クラス.slick-dotsを使用してdiv内に滑らかなドットを生成します。そのクラスには絶対的な位置があります。したがって、あなたが望むものを達成する最も簡単な方法は、そのdivにスタイルを追加することです：

.slick-dots {
  top: 100px;  // play with the number of pixels to position it as you want
  left: 100px; // play with the number of pixels to position it as you want
}
7
Asaf David

Slick設定で「appendDots：$（Element）」を使用できます。その要素にドットを追加します。通常のCSSを使用して、その要素を任意の場所に配置できます。スライドの上に配置する場合は、要素に絶対配置または相対配置を使用できます。

4
iiR

overflow: hiddenラッパー（この例ではスライダーフェード）。このようにして、ドットを包み込みます。

0
Thomas VB