ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


人の可能性が、
次の世界を
つくる

ファーストビュー 事業内容、ポートフォリオ、料金各種手続き、コンタクトファーストビュー 企業理念ファーストビュー
ファーストビュー
ファーストビュー
       

HTMLCSS

【jQuery】スライダープラグイン「slick」の使い方

slickスライド

 

このブログでは、オリジナルサイトにスライダーを実装する「slick.js」の解説をします。


こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。

【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者(https://coconala.com/services/1667244)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演(株式会社宝島社出版STARTBOOK)

佐藤先生
ぺんぺん
スライダーってどうやって作るの?できれば難しい記述なく作れる方法を教えてください。

この記事の内容

  • slick.jsのはじめかた準備編
  • 実際の記述方法
  • slick.jsのオプション設定
もし読み進めてみても分からないことがあれば1500円でレクチャーしています
佐藤先生

slick.jsとは

slick.jsとは、jQueryをベースとしたスライダー作成用プラグインです。IE8以上のブラウザに対応していて、カスタマイズ性が高いため国内外問わず利用されています。条件にかなうと、商用利用も可能なので後々、制作会社で導入したいと考えている人にもおすすめです。

slickを使えば何ができるのでしょうか。スライダーを作成するためのプラグインなので、真横にスライドするシンプルなスライダーをサイトに実装するのに使えます。カルーセルに関しては、豊富なオプションを利用すれば、自分なりのカスタマイズも可能です。

レスポンシブにも対応しているため、ブレイクポイントを設定すればスマホ・タブレット・PCそれぞれのデバイスに応じた表示をチェックできます。

slick.jsの使い方

jQueryがベースのプラグイン「slick」。実際に使ってサイトにスライダーを実装するにはどうすればいいのでしょうか。初心者向けにslickの使い方、事前準備について解説します。

slickを使えるようになるには、必要なファイルを読み込むかCDNを使って読み込まなければなりません。まずは、sliclの公式サイトにアクセスしてプラグインをダウンロードしましょう。

slick.jsのファイルをダウンロードして使う方法

slickでサイトにスライダーを実装するには、必要なファイルをダウンロードしなければなりません。slick.jsの公式サイトにアクセスして「Download Now」のボタンをクリックすれば、zipフォルダのダウンロードがスタートします。

フォルダの中身すべてがスライダーの実装に使えるわけではありません。サンプルファイルなどの不要なファイルも含まれているため、必要なファイルのみを読み込ませましょう。

slickのフォルダ内に入っている以下の5つは、Web製作で使うデータとして読み込みます。

  • fontsフォルダ
  • ajax-loader.gif
  • slick.css
  • slick-theme.css
  • slick.js

上記5つのファイルがなければslickは正しく動作しません。

続いて、HTMLでjQueryとslickの読み込みを行います。コーディング内のファイルパスは自分なりの構成に適したものを設定しましょう。

<headタグの中のHTML>

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

<</body>の直前HTML>

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

slickを正しく動作させるためにはベースになっているjQueryを読み込ませなければなりません。</body>の直前で記述したHTMLの前に次のような記述を加えましょう。

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.js"></script>

HTMLでjQueryとslickを読み込むと準備万端です。しかし、正しく動作させるためにはさらにHTMLの記述が必要です。

<slickを動かすためのHTML>

<div class="slider">
<div class="image"><img src="img.jpg"></div>
<div class="image"><img src="img.jpg"></div>
<div class="image"><img src="img.jpg"></div>
</div>

<script>
$('.slider').slick();
</script>

「$」部分は動作させたいスライダーのHTMLセレクタと一致するように設定してください。

slick.jsのCDNを使う方法

slickの実装するにはファイルを選別しなければならないこので、面倒に感じてしまう人もいるでしょう。しかし、slickのフォルダを一式ダウンロードしなくてもCDNを使えば実装できます。

slickの公式サイトからダウンロード画面にアクセスし「You can also use slick with the jsDelivr CDN!」の下にあるコードを取得しましょう。CDN用のコードをhead要素のHTML内にコピペすれば楽にスライダーを実装できます。

その場合、HTMLの記述は次のようになります。

<headタグの中のHTML>

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

</body>の直前HTML>

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

CDNを使えば、ファイルをダウンロード数手間が省けますが、オンライン環境でしか動作しないためいつでもどこでもサイト制作の時間を作りたい人は注意してください。

slick.jsのオプション設定

slickが正しく動作するようになっても、デフォルト状態では装飾が不十分です。自動スライドやページネーションなどを実装したいならオプションを設定しましょう。

slickのオプションはたくさんあるので、自分なりにサイトのイメージに合ったカスタマイズを試してみてください。

<slickのオプション一覧>

オプション名 デフォルト値 使える値や仕様
speed 300 スライドの切り替えにかける時間の設定
※ デフォルトの300は切り替えに0.3秒間かける
autoplay false 自動再生
『true』の値で自動再生する
autoplaySpeed 3000 自動再生時のスライドスピード
※ 3000は3秒間表示
infinite true スライドのループ設定
『false』を入れるとループしなくなる
vertical false 縦方向(下から上)にスライド
※ fadeのオプションが『true』は不可能
fade false スライドの切り替えをフェードイン・フェードアウトに切り替え
easing ‘linear’ jQueryのイージングを文字列形式で設定
cssEase ‘ease’ CSS3のAnimationEasingで設定
useCSS true CSSのtransitionの有効化
useTransform true CSSのtransformの有効化
rows 1 スライダーの行数を設定
slidesPerRow 1 rowsの値が2以上のとき、1行に表示するスライド数を設定
variableWidth false スライド幅の自動計算無効化
rtl false スライドの向きを変更

slickを使ってスライダー実装するなら、リストタグの使用は控えましょう。自動的にタグが出力されるslickで<ul><li>を活用すると構造が崩れてしまいます。<div>を使ってコーディングしていきましょう。

slick.jsまとめ

slickの導入方法やカスタマイズに使えるオプションなどを説明しました。コーディング初心者でもスライダーを実装して、より見やすくデザイン性の富んだサイト制作が可能です。slickのオプションを活用して、自分なりのカスタマイズを楽しみましょう。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。
佐藤先生

VSコードウェブデザイン初心者
ホームページ作成をする人は必見!VScodeのインストール方法と必須拡張機能9選!beautifyは神拡張機能なので使い方を覚えよう

  このブログでは、VScodeのインストール方法と必須拡張機能9選について解説していきます。 こんにちは、佐藤優里(@enginnerlabo)です。主にホームページ制作・講師をしています ...

© 2024 ホームページ制作なら制作実績200件以上の現役ウェブデザイナーへ直接依頼!東京都新宿区|渋谷区|目黒区|港区 Powered by AFFINGER5