3テラバイト

プログラム関連備忘録サイト。主にゲーム。

JavaScript

カルーセルを実装するjQueryプラグインslickの使い方

投稿日:

こんにちは、今日はカルーセルを実行できるjQueryプラグイン、slickの使い方についてまとめていきます。

公式サイト

https://kenwheeler.github.io/slick/

ダウンロード方法

公式サイトのヘッダーメニューにあるget it nowをクリックするとダウンロードリンクがある位置まで移動します。
そこにあるDownload Nowボタンを押下するとダウンロードが開始されます。

CSS

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

テーマを読み込む場合は以下も追記します。

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

JS

<script type="text/javascript" src="slick/slick.min.js"></script>

jQueryの読み込みを行なっていない場合はjQueryをダウンロードし同様に追記、または公式サイト同様にCDNを使用する場合は以下を追記します。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

CDNを使用する場合

ファイルをダウンロードしてサーバーに配置する形ではなく、CDNを使用することもできます。

それぞれ以下のコードを自身のサイトに貼り付けます。

CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

使い方

公式サイトの[When complete, your HTML should look something like:]の部分にサンプルのコード全文があるため、ダウンロードしたslick本体の配置が適切に行えていればコードをコピーするのみで動作が確認できます。

必要な手順は主に以下の通りです。

  • 必要なcssとjsファイルの読み込み
  • カルーセル部分のHTMLコード
  • 動作を開始するjsコード

-JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

ブラウザのコンソールからページ内の画像リストを確認する

ブラウザのコンソールにdocument.imagesの内容を出力すると、現在の文書内にある画像のリストが返され、任意の要素をクリックでその画像を確認することができます。 console.log(doc …

no image

JavaScriptで指定時間ごとに処理を実行する

指定時間ごとに処理を実行する setInterval関数の第一引数に指定時間経過ごとに実行したいコールバック関数を、第二引数に待機時間をミリ秒で指定します。 以下の例では関数callbackFuncを …

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …

no image

ブラウザのコンソールからページ内の埋め込みリストを確認する

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)