画面いっぱいのスライダーを実装する

tecmemo1801こんにちは、ウェブラボクリエイターズメモです。

今回は、多機能なスライダー実装できるjQueryプラグイン「slick」を紹介したいと思います。

最近個人的にスライダーを色々カスタマイズすることがあり、その際に使ってみてとても便利だったので備忘録としてここに書いときます。

まずは公式サイトからプラグインをダウンロードしてきます。ヘッダーのメニューに「get it now」とあるのでクリック、そこに「Download Now」ボタンがあります。

「slick」公式サイト

では実装していきます。まずはDEMOをご覧下さい。

作成したDEMO

メイン画像とサムネイル画像を連動させたウィンドウ幅いっぱいのスライダーを実装してみました。

少し設定が複雑ですが、解説していきます。

HTMLhead内に以下のようにCSSの読み込みとスクリプトを記述します。(別にhead内である必要はありません)

■HTMLhead部分

スライダー部分のHTMLやCSSはお好みで調整してください。

■HTMLスライダー部分

必要な記述は以上です。640px以下でメインのスライダーの挙動が変わりますのでウィンドウ幅を縮めてみてください。

作成したDEMO

他のプラグインとかでウィンドウ幅いっぱいのスライダーを実装しようとするとかなり面倒だったり、うまくいかなかったりしたので便利なプラグインを見つけた!って感じです。

しかも自分でブレークポイントを決めて設定を変えられるのはとても便利ですね。

「slick」自体は結構前から知っていたのですが、なかなか使う機会が無かったのでもっと早く使ってれば良かったなと思います。

プラグインの設定などわりと上級者向けのスライダーですが、ものすごい多機能なのできっと皆さんの要望にも応えてくれるでしょう。

対応ブラウザですが、どうやらIE8から動くみたいですね。

以上、クリエイターズメモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。