QA@IT

jQueryスライダー「slick.jp」のドット位置を上に表示する方法

13115 PV

jQueryスライダー「slick.jp」で自分のHPにスライドを入れたいのですが、
スライドの画像と下の丸い表示ボタン(ドット)を入れ替えてドットを画像の上に持っていきたいのですが、そのようなことは可能でしょうか?
分かる方がいましたがご教授くださると幸いです。
よろしくお願い致します。

「slick.jp」公式HPデモ→http://kenwheeler.github.io/slick/

Javascriptのコード
<script type="text/javascript">
jQuery('.single-item').slick({
arrows:false,
infinite:true,
dots:true
});
< /script >

回答

サンプルコードベースで

1.ドットを配置するために、Divあたりを上に用意する

  <div id="apDots"></div>
  <section class="center slider">
    <div>
      <img src="http://placehold.it/350x300?text=1" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6" alt="">
    </div>
  </section>

2.SlickのappendDotsオプションを追加する

jQuery('.single-item').slick({
    arrows:false,
    infinite:true,
    dots:true,
    appendDots:$("#apDots")
});

3.slickのCssでテーマを使っているのであれば
DotぶのCssClass .slick-dots の中にある position:absolute が邪魔をするので削除orコメントアウト

以上

編集 履歴 (1)
  • 分かりやすいご回答ありがとうございます!
    頂いた記述の通りで動きました!

    ネットを探しても全く情報が出てこなかったので本当に助かりました。
    本当に有難うございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。