2015年07月09日

Slick.jsでオリジナルの矢印ボタンを設置する

Slick.jsとは、jQueryの高性能なカルーセルプラグインです。
これできないかな〜と思う機能のほとんどが網羅されており、設置も簡単。
ここで標準的な設置の解説は控えますが、デモを見るだけでいろいろできるんだな〜というのがわかってもらえると思います。

今回、1ページで2つカルーセルを動作させる必要があり、標準的な動作については問題なかったのですが、大きさが違うカルーセルだったため、前へ、次への矢印ボタンのサイズも異なり、カスタマイズさせる必要がありました。
なので、その奮闘記になります。

slick.jsでは、
$('#hoge').slick({
・・・
});

といった形式でオプションを指定します。
ここに、
appendArrows: $('#arrow')

と書いてあげることで、矢印部分を指定したセレクタやクラスに置き換えることが可能です。

例えば、
$('#hoge').slick({
appendArrows: $('#arrow')
});


とし、HTML部分は、
<div id="arrow">
<div class="slick-next"><img src="hogehoge.png" alt=""></div>
<div class="slick-prev"><img src="hugahuga.png" alt=""></div>
</div>

と記述します。

このままだと標準ボタンと追加したボタンの2つ(計4つw)が表示されてしまうので、標準ボタンを消します。
標準のボタンはCSSでslick-theme.css内に
.slick-next:before{content: url(・・・)}
.slick-after:before{content: url(・・・)}

で指定されているので、
#arrow .slick-next:before{content:""}
#arrow .slick-after:before{content:""}

と指定してあげればOKです。

あとは、leftとかtopでボタンの位置を指定してあげてください。

2016.10.2 追記
.slick-nextと.slick-prevはabsoluteで配置されますので、親階層をposition:relativeに設定する必要があります。
親の位置をslickが適用されているエリアと同じにしないと配置がずれることになります。
posted by BigMoonEz at 19:03 | Comment(0) | TrackBack(0) | jQuery | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック