【jQuery】レスポンシヴ対応のクオリティの高いスライダー[slick]の使い方。Tags【jQuery】レスポンシヴ対応のクオリティの高いスライダー[slick]の使い方。ONZEhttps://on-ze.com/archives/2563HomeBlog【jQuery】レスポンシヴ対応のクオリティの高いスライダー[slick]の使い方。Google高機能・高品質なカルーセル・スライダー[slick]の使い方を紹介します。need.」(訳:あなたが必要とする最後のカルーセル)と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの製作者がオススメしているようです。now」というリンクをクリックすると配布されているファイル一式をダウンロードすることができます。[slick]公式サイトダウンロードしたzipファイルを解凍すると、いくつかのファイルとフォルダが展開されますが、このうち主に必要なのは以下のリストに挙げたファイルになります。slick-theme.cssslick.cssslick.min.js他に「fonts」というフォルダにフォントのファイル一式が内包されていますが、これはスライダーをコントロールするナヴィゲーションの矢印やドットを表示する際に使われます。デザインを独自にカスタマイズするのであれば不要ですが、デフォルトの状態のまま利用する際はこれらも必要になります。このフォントファイルはスタイルシートの「slick-theme.css」内で読み込むように設定されています。以下、詳しい実装方法を紹介します。内で[slick]のファイル一式とjQueryの本体ファイルを読み込みます。src="slick.min.js"></script></head>ここでは仮に、GoogleのCDNにホストされているヴァージョン「2.1.3」のjQuery本体ファイルを読み込んでいます。続いて[slick]を使うスライダー部分ですが、こちらは以下のようなシンプルなコードでOKです。src="images/sample-03.png"></li></ul>最後に[slick]を起動させるための初期設定のコードをHTMLの任意の箇所に記述。基本的にはこれで動くようになります。</script>なお上記の設定では、クラス名「.sample」の箇所に[slick]を効かせ、自動再生を有効化、その自動再生の間隔は2秒に指定、サムネイルのドットを表示、マウスカーソルを充てると自動再生が一時停止、という内容になっています。代表的な、よく使うオプションを以下に紹介します。autoplay自動再生autoplaySpeed自動再生の間隔arrows左右のナヴィゲーションの矢印を表示dotsサムネイルのドットを表示draggableドラッグによるコントロールfadeスライダーの要素をフェードイン・フェードアウトで切り替えeasingeasingの種類を指定可能infiniteループさせるか否かpauseOnHoverマウスオーバーで自動再生を一時停止pauseOnDotsHoverドットにマウスオーバーで一時停止responsiveレスポンシヴの設定その他にもたくさんのオプションが用意されています。詳細は公式サイトをご覧ください。実際に動作するサンプルは以下のリンク先からどうぞ。[slick]:動作サンプルオンズでは、新規のホームページ制作だけでなく、こういった便利なプラグインを既存のホームページに設置するお手伝いも承っています。比較的に安価で高機能なシステムを導入できますので、ご要望のある方はぜひお問い合わせください。お問い合わせフォームは以下より。お問い合わせTwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】超簡単jQueryスライダー[bxSlider]の使い方。【jQuery】郵便番号を入力すると住所を自動補完する[jquery.jpostal.js]が便利です。【jQuery】画像のリンク切れに備えるための簡単なjQueryコード。【jQuery】要素をタイル状に並べるプラグイン[Freetile.js]の使い方。