画像が一定の時間で切り替わるような動きって、難しそうですね
スライダーのことですね。
jQueryのプラグイン「slick」を使えば、簡単に実装できますよ！
See the Pen Untitled by spica (@spica_blog) on CodePen.
slickは、スライダー(カルーセル)が簡単に実装でき、オプションの種類が豊富で、レスポンシブ対応もしている便利なjQueryのプラグインです。
プラグインslickの導入方法
他のプラグインと同様に、導入するにはファイルのダウンロードかCDNを利用します。
slick公式サイトのメニューから、get it nowをクリックします。
ファイルをダウンロードする
Download Nowをクリックすると、圧縮ファイルがダウンロードされますので、解凍してフォルダを展開します。
最低限必要なファイルは「slick.css」と「slick.min.js」です。
slick公式のテーマを使う場合、「fonts」「ajax-loader.gif」「slick-theme.css」も必要になります。
これらのファイルをローカルに保存します。
＜head＞タグ内に以下のように記述し、パスを適宜変更します。
<link rel="stylesheet" type="text/css" href="./slick.css/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./slick.css/slick-theme.css" media="screen" />
<!-- 独自のcssファイルはこの下に記述 --><body>の閉じタグの直前に以下のように記述し、パスを適宜変更します。
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./js/slick.min.js"></script>
<!-- 独自のjsファイルはこの下に記述 -->jQuery本体ファイルは、ここではローカルから読み込ませていますが、CDNでももちろん大丈夫です。
「fonts」フォルダと「ajax-loader.gif」は、「slick.css」などと同じディレクトリに置きましょう。
CDNを使う
CDNのコードをコピーします。
＜head>タグ内に以下のように記述します。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- 独自のcssファイルはこの下に記述 -->jQuery本体ファイルも読み込みます。ここではGoogleのCDNを採用していますが、公式サイトやMicrosoftのものもあります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- 独自のcssファイルはこの下に記述 -->
HTMLの記述
HTMLファイルの任意の場所に、スライダー部分の記述をします。
パスは適宜変更してください。
<ul class="slider">
<li><img src="img/picture1.jpg" alt=""></li>
<li><img src="img/picture2.jpg" alt=""></li>
<li><img src="img/picture3.jpg" alt=""></li>
<li><img src="img/picture4.jpg" alt=""></li>
<li><img src="img/picture5.jpg" alt=""></li>
<li><img src="img/picture6.jpg" alt=""></li>
</ul>CSSの記述
スライダー自体のサイズ等を指定しておきます。
.slide {
width: 100%;
margin: 0 auto;
position: relative;
}
.slide li {
list-style: none;
}
.slide li img {
max-width: 100%;
object-fit: cover;
}JavaScriptの記述
HTMLファイル内で＜script＞タグで囲って記述する方法と、制作用のjsファイルを作成し、HTML内のhead要素の中で参照する方法があります。
基本の書式
slickのコードの書き方はとても簡単です。
slickはまずこのコードを記述してから始まります。
$(function(){
$('セレクタ').slick();
});See the Pen slick basic by spica (@spica_blog) on CodePen.
この時点ではスライダーには最低限の機能しかありません。動作や表示に関する指定は、オプションで行います。
オプションについて
slickのオプションは、以下のようなものがよく使われています。
オプションの記述は、「$(‘セレクタ名’).slick()」のslick()内に、「オプション名: 値」をカンマ（,）で繋げ{}で囲います。
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});オプションの種類
| オプション名 | 値 | 初期値 | 説明 |
|---|---|---|---|
| slidesToShow | 数値 | 1 | 表示枚数 |
| slidesToScroll | 数値 | 1 | スクロール枚数 |
| autoplay | true / false | true | 自動再生 |
| autoplaySpeed | 数値(ミリ秒) | 3000 | 自動再生のスピード |
| infinite | true / false | true | 無限再生 |
| speed | 数値(ミリ秒) | 300 | スクロールやアニメーションのスピード |
| fade | true / false | false | フェードアウト、フェードアウトの設定 |
| dots | true / false | false | ドット(ページ送り) |
| arrows | true / false | true | スライダーの左右に矢印を付ける |
| centerMode | true / false | false | スライド1枚を中央に置き、両サイドに前後のスライドが見切れるようにする |
| centerPadding | 数値(px / %) | '50px' | 見切れの幅 |
| cssEase | ease / linear / ease-in / ease-out / ease-in-out | 'ease' | アニメーションの進め方 |
| responsive | オブジェクト | none | レスポンシブの設定 |
| accessibility | true / false | true | キーボードの左右ボタンで画像の切り替え |
| adaptiveHeight | true / false | false | スライダーの高さを現在のスライドに合わせる |
| prevArrow | 文字列 | 戻るボタンのHTMLを指定する | |
| nextArrow | 文字列 | 進むボタンのHTMLを指定する | |
| dotsClass | 文字列 | 'slick-dots' | ドットのクラス名を指定する |
| lazyLoad | ondemand / progressive | 'ondemand' | 画像の遅延表示処理lazyload対応。スライドした領域が表示されるタイミングで読み込み開始する。 |
| swipe | true / false | true | スワイプに対応するか |
| touchMove | true / false | true | タッチムーブ機能を有効にするか |
| variableWidth | true / false | false | スライドごとに横幅を可変にするか |
| vertical | true / false | false | 縦方向にスライドするか |
| verticalSwiping | true / false | false | 縦方向のスワイプに対応するか |
レスポンシブの設定方法
オプションの中でレスポンシブの設定ができますが、少し分かりにくい部分でもあります。
CSSの記述のようなものなので、ポイントを掴めば難しくはありません。
responsive: [
{
breakpoint: //ブレークポイント
settings: {
//ここに処理を記述
}
} //複数のブレークポイントがある場合、カンマで区切って同様に記述
]ブレークポイントが2つのサンプルです。
$('.slider').slick({
autoplay: true,
dots: true,
// スライドの最後まできたら次には進まない
infinite: false,
speed: 300,
// 通常時はスライドは4枚表示、4枚ずつスライド
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
// 1024px以下の時、スライドは3枚表示、3枚ずつスライド
slidesToShow: 3,
slidesToScroll: 3,
// スライドの最後まで来たら最初に戻る
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
// 600px以下の時、スライドは2枚表示、2枚ずつスライド
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});See the Pen slick breakpoint by spica (@spica_blog) on CodePen.
ムームードメイン
ドット、矢印のカスタマイズ
slickのテーマでスタイルが指定されているものは、「slick-theme.css」でクラス名を確認し、制作用のcssファイルで上書きをします。
ドットをカスタマイズする
例えば、ページ送りのドットがアクティブな時のスタイルは、slick-theme.cssでは以下のように記述されています。
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black; // アクティブになると黒に変わる
}
制作用cssファイルに、以下のように記述してみましょう。
.slick-dots li.slick-active button:before
{
color: red; // アクティブになると赤に変わる
}
矢印をカスタマイズする
矢印(arrows)のスタイルを変更する場合は、左は「.slick-prev」、右は「.slick-next」を指定して変更します。
/* 左右の矢印をカスタマイズ */
/* 矢印を画像の上に表示 */
.slick-prev {
left: 20px;
z-index: 100;
}
.slick-next {
right: 45px;
}
/* 矢印の大きさと色を変更 */
.slick-prev:before,
.slick-next:before
{
font-size: 50px;
color: black;
}See the Pen slick sample_arrows by spica (@spica_blog) on CodePen.
矢印を任意の画像に変更する
矢印をお好きな画像に変更することもできます。制作用jsファイルのコードのオプションに、「prevArrow」「nextArrow」を追記し、画像のパスとクラス名を記述します。
CSSでポジションやサイズ等の変更をするためにクラス名を付けますが、左右共通の部分は「slide-arrow」、左は「prev-arrow」、右は「next-arrow」としてあります。
「slick-arrow」と指定してしまうと、元々slickが使用しているクラス名のため思わぬトラブルの原因になりかねませんので気を付けましょう。
$(function(){
$(".slider").slick({
prevArrow: '<img src="戻る矢印画像のパス" class="slide-arrow prev-arrow">',
nextArrow: '<img src="次へ矢印画像のパス" class="slide-arrow next-arrow">'
});
});See the Pen slick sample_arrows2 by spica (@spica_blog) on CodePen.
まとめ
jQueryのプラグインslickでのスライダーの実装方法をご紹介しました。
slickっておしゃれなスライダーが簡単に実装できるんですね！
動作の安定性の高さも人気の理由の一つです。
ウェブ制作の現場でもよく使われている人気のプラグインslick。
自分が作りたいスライダーが実装できるか、操作性はどうなのか、ぜひ一度試してみてください！
ポチップ
コメント