東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2018.01.25 Posted by

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

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

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

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

「slick」公式サイト

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

作成したDEMO

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

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

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

■HTMLhead部分

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

■HTMLスライダー部分

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

作成したDEMO

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

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

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

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

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278