ウェブ

Slick/全画面でふわっと切り替えスライドショー【jQuery】

slickアイキャッチ画像

スライダープラグイン【slick】を使って全画面スライドショーを実装。

slickの実装方法」と「slickのカスタマイズ」について解説していきます。
画像のスライドショーにはいろんな方法がありますが、jQueryベース【slick】が安定していてカスタマイズもしやすいのでオススメです。

動作は下のデモページボタンから確認できます。

【全画面スライドショー】

プル

slickの実装方法から解説しますので、slickのカスタマイズは(目次:画面でふわっと切り替え【コード】)からになります。

slickの実装方法

まずは、jQueryベースのプラグインなのでjQueryの実装します。

slickを使用する為には二種類あり「外部リンクslickファイル」か「ローカルデータslickファイル」どちらかです。

<head></head>の中に下記のコードを入力。
jquerycssjsのリンクになります。

<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 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>
</head>

ローカルデータslickファイル

slickファイルを自身のPCにダウンロードする→「slick公式サイト」

slickサイト
slickサイト

ダウンロードが完了したらzipファイルを解凍。
フォルダ「slick-1.8.1」→「slick-1.8.1」→「slick」→slick.cssslick.min.jsのファイルが入っています。

その中で必須になるslickファイルはslick.min.jsslick.cssslick-theme.css

slickファイル
slickファイル

slickの3つのファイルを下記のフォルダ構成にします。

ローカルファイル構成
ローカルファイル構成

index.html<head></head>の中に下記コードを入力。

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/commmon.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<!-- js -->
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

フワッと切り替え(background-image版)

See the Pen スリックスライダーフワッと切り替え(background-image版) by pull-design (@design90806871) on CodePen.

【コード一覧】背景画像でふわっと切り替え

ulで囲みliに対してbackground-imageで画像を配置します。

HTML

<ul class="slider">
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

/* リセットCSS */
body,ul,li { padding: 0; margin: 0;}
/* スリックスライダー */
.slider li {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.slider li:first-of-type {
  background-image: url(https://picsum.photos/1921/1080);
}
.slider li:nth-of-type(2) {
  background-image: url(https://picsum.photos/1922/1081);
}
.slider li:last-of-type {
  background-image: url(https://picsum.photos/1923/1082);
}

JS

$('.slider').slick({
  infinite: true, //スライドのループを有効
  arrows: false, //前へ、次への矢印ボタンの有無
  fade: true, //スライドの切り替えをフェードに
  speed: 2000, //アニメーションの切り替えスピード
  autoplaySpeed: 3000, //自動再生時のスライドの静止時間
  autoplay: true, //スライダーの自動再生
  pauseOnFocus: false, //フォーカスで一時停止を無効
  pauseOnHover: false, //マウスホバーで一時停止を無効
  pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});

画面でふわっと切り替え【コード】

See the Pen スリックスライダーフワッと切り替え by pull-design (@design90806871) on CodePen.

【コード一覧】画面でふわっと切り替え

ulで囲みliの中に画像を入れます。このコードのimgは自動で変わる画像に設定しているので、画像を設定したい場合は、imgフォルダを作ってその中に画像を入れて指定しましょう。

HTML

<ul class="slider">
  <li><img src="https://picsum.photos/1920/1080"></li>
  <li><img src="https://picsum.photos/1950/1082"></li>
  <li><img src="https://picsum.photos/1980/1081"></li>
</ul>

CSS

/* リセットCSS */
body,ul,li {padding: 0; margin: 0;}
/* スリックスライダー */
.slider img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

js

$('.slider').slick({
  infinite: true, //スライドのループを有効
  arrows: false, //前へ、次への矢印ボタンの有無
  fade: true, //スライドの切り替えをフェードに
  speed: 2000, //アニメーションの切り替えスピード
  autoplaySpeed: 3000, //自動再生時のスライドの静止時間
  autoplay: true, //スライダーの自動再生
  pauseOnFocus: false, //フォーカスで一時停止を無効
  pauseOnHover: false, //マウスホバーで一時停止を無効
  pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});

レスポンシブ対応にもなっているので、コードが多いですがコピーペーストで実装できます。

slickオプション一覧

オプション名説明初期値
accessibilityキーボードの矢印キーやTabキーで操作設定true
adaptiveHeightスライダーの高さの自動調整false
autoplayスライダーの自動再生false
autoplaySpeed自動再生のスピード(ミリ秒単位)3000
arrows前へ、次への矢印ボタンtrue
asNavFor他のスライダーのナビゲーションに設定null
appendArrows左右の矢印ボタンの場所を変更$(element)
appendDotsドットインジケーターの場所変更$(element)
prevArrow矢印ボタンの「前へ」のHTMLをカスタマイズ<button type=”button” class=”slick-prev”>Previous</button>
nextArrow矢印ボタンの「次へ」のHTMLをカスタマイズ<button type=”button” class=”slick-next”>Next</button>
centerModeスライダーを中心に表示して部分的に前後のスライドが見えるように設定false
centerPadding見切れるスライダーの幅。’px’または’%’。’50px’
cssEaseCSS3アニメーションイージングを設定‘ease’
dotsドットナビゲーションボタンを表示するかどうかfalse
dotsClassドットナビゲーションボタンのclass名を指定‘slick-dots’
fadeスライダーの切り替えをスライドではなくフェイドインにするかfalse
focusOnSelectクリックでのスライド切り替えを有効にするかfalse
easingjQueryアニメーションイージングを追加‘linear’
edgeFrictioninfinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定0.15
infiniteスライドの端まできた時にループさせるかどうかtrue
initialSlide最初に表示するスライドを指定0
lazyLoad画像の遅延読み込みを設定(’ondemand’か’progressive’)ondemand
mobileFirstレスポンシブの設定でモバイルの計算を優先させるfalse
pauseOnFocus自動再生時にスライドにフォーカスした際、自動再生をストップさせるかtrue
pauseOnHover自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるかtrue
pauseOnDotsHover自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるかfalse
respondToレスポンシブの基準を設定(’window’もしくは’slider’もしくは’min’)window
responsiveレスポンシブのブレイクポイントを指定none
rowsスライドの行数を設定(slidesPerRowを使用して、各行に含めるスライドの数を設定)1
slideスライドとして使用する要素を設定
slidesPerRowrowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定1
slidesToShow同時に表示されるスライドの数を設定1
slidesToScroll同時にスクロールされるスライドの数を設定1
speedアニメーションの切り替えスピード300
swipeスワイプでスライドを変更できるかどうかtrue
swipeToSlideslidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かすfalse
touchMoveタッチでスライドさせられるかどうかtrue
touchThresholdスワイプでスライドさせる距離を設定(1 / touchThreshold)*スライダの幅5
useCSSCSSのtransitionを有効にするかどうかtrue
useTransformCSSのtransformを有効にするかどうかtrue
variableWidthスライド毎に横幅が違う場合、スライド幅を可変にするかどうかfalse
verticalスライドを縦方向にするかどうかfalse
verticalSwiping縦方向のスワイプを有効にするかどうかfalse
rtlスライダーの方向を右から左に変更するか(right to left)false
waitForAnimateスライドアニメーション中にスライドを前後させる要求を無視するかtrue
zIndexスライドの重なり順1000
slickオプション
▪ズーム機能を追加したslickスライダーは下記記事をご確認ください。
【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー
【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー...

↓jQueryについてしっかり理解したい方は下記の本がお勧めです。(古い本になりますが、良本です。)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る
Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る

▪Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る
jQueryはいま最もウェブデザイナー、ウェブサイト制作者に注目されている技術と言っても過言ではありません。ウェブサイトにアコーディオン・タブ・ツールチップなどを組み込もうと思ったら、まずjQueryを使うのがセオリー。

↓下記本はコピペのみならず、しっかり理解しながら知識が身につくお勧めの本です。

▪動くWebデザインアイディア帳
Webサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。近年のウェブサイトで使用されている基本的な動きの原理や仕組みをサンプルコードと共に紹介します。

クリックでスクロール

See the Pen スリックスライダー_slick by pull-design (@design90806871) on CodePen.

両サイドちら見せスライダー

See the Pen 両サイドちら見せスライダー by pull-design (@design90806871) on CodePen.

画像リスト_スリック

See the Pen 画像リスト_スリック by pull-design (@design90806871) on CodePen.

↓下記本は実践編としてさらに踏み込んだ知識が身につくお勧めの本です。

動くWebデザインア帳イディア帳
動くWebデザインア帳イディア帳

▪動くWebデザイン アイディア帳 実践編
好評の「動くWebデザイン アイディア帳」の姉妹本で「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!「サイトの印象を決定付ける動き」をこの1冊が丸ごとカバーしています。

book
created by Rinker
¥2,860 (2022/10/04 10:32:31時点 楽天市場調べ-詳細)

jQuery不要のスライダー

Swiperの場合はjQuery不要で利用可能です。

外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能です。

swiper
Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能。...

フルスクリーンでズームしながら画像を切り替える機能が付いています。

swiper_html
フルスクリーントップ画像をズームしながら全画面で画像を切り替えるSwiperを組み合わせハンバーガーメニュー付きをコピペで実装【JavaScrip】フルスクリーントップ画像を「ズームしながら画像を切り替える」Swiper導入と、「ハンバーガーメニュー」を同時にコピーペーストで実装できるように記事にしました。HTMLのイメージ画像を差し替えるだけで使いまわせるのでとても便利かと思います。参考例として「ハンバーガーメニュー」をまだ追加していない状態のコードをCodePenに記述しています。...

コメントを残す

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

CAPTCHA