カテゴリ jquery

当サイトはアフィリエイト広告を使用しています

【jQuery入門】実務でよくある！実装サンプルpart2

実務でよくあるjQueryの実装の紹介のpart2になります。

前回に引き続き、実務におけるjQueryを使った実用的な例をCodePenで紹介します！

今回はjQuery以外のライブラリも使用しています。

実装の詳細については、コード内にコメントを入れているので参照してください。

前回記事も是非ご覧ください！

jQueryを初めて学習する方は入門編記事一覧を纏めているのでご覧ください！

slickを使ってスライダーを実装

スライダーの他、スライドショー、カルーセルとも言います。

jQueryライブラリと、slickというライブラリを使用しています。

CDNでライブラリを読込む

slickを使うためには次のものを準備する必要があります。

  • jQueryライブラリ
  • slickライブラリ
  • slick用のCSS

jQueryと同様に、slickライブラリ・slick用CSSもCDNで用意されています。

jQueryライブラリはhttps://releases.jquery.com/より<script>をコピーしてHTMLファイルに貼り付けます。

導入方法は以前の記事で紹介しているのでご覧ください。

次にslickです。https://kenwheeler.github.io/slick/#go-get-itを開きます。

CDN経由で読込できる<link>、<script>があるので、コードをコピーします。

slickのCDN

コピーしたコードは、<link>は<head>内へ、<script>は<body>の最後に貼り付けます。(<script>を<head>内に入れる場合はdefer属性を付けるのを忘れずに)

尚、slickライブラリ内でjQueryを使用しているので、必ずjQueryライブラリを先に読み込むようにしましょう。

コードを抜粋すると以下のようなります。

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

<body>
...
<!-- jQueryライブラリ -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- slick用のjsライブラリ -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>

slickを実装する

ここまで準備ができたら、

  • スライドにしたい要素を並べ、<div>等のコンテナで囲う。
<div class="slider-wrapper">
  <ul class="slider">    <li class="slider-item">      <img src="https://drive.google.com/uc?export=view&id=1dKtQh86Bg5t5ROyzaDBCQRLVJXj04XuE" alt="">    </li>    <li class="slider-item">      <img src="https://drive.google.com/uc?export=view&id=1iqsTzfDQYhbo4NL41xKUjcpXMf8XKNNf" alt="">    </li>    <li class="slider-item">      <img src="https://drive.google.com/uc?export=view&id=1Z9nXkBkYnHjrKKtjHqKXpjuK1qBNl4c1" alt="">    </li>  </ul></div>
  • $(スライドのコンテナ).slick(オプション)とする
$(function () {
  $(".slider").slick();});

シンプルなスライダーであれば、これだけで実装できます。

オプションを追加する

オプションは、オブジェクトで{オプション: 指定する値, オプション: 指定する値, ...}として引数に指定することが可能です。

よく使うオプションと、指定する値には以下のようなものがあります。

オプション指定する値と効果初期値
autoplaytrueで自動再生あり、falseで自動再生無しfalse
autoplaySpeed自動再生時に次のスライドへ移るまでの間隔を指定3000（ミリ秒）
prevArrow前スライドへのボタン要素を文字列形式で指定する<button type=”button” class=”slick-prev”>Previous</button>
nextArrow次スライドへのボタン要素を文字列形式で指定する<button type=”button” class=”slick-next”>Next</button>
centerModetrueにするとスライドを中心に表示して、前後のスライドが一部見えるようになるfalse
centerPaddingcenterMode時に前後のスライドが見える幅を文字列で指定50px（centerMode有効時）
dotstrueにするとドットインジケーターを表示するfalse
fadetrueにすると、スライドをフェードで切り替えるfalse
dotsClassドットインジケーターのclass名を文字列で指定できるslick-dots
pauseOnFocustrueで、フォーカスした時に一時停止するtrue（autoplay:true時のみ）
pauseOnHovertrueで、マウスホバーした時に一時停止するtrue（autoplay:true時のみ）
speedスライド、フェードアニメーションの移動にかかる時間を数値で指定する300（ミリ秒）
responsiveブレイクポイントを指定して、オプションを上書き変更できる無し

前後の矢印のカスタマイズ

オプションで指定することで、前後スライドへの矢印をカスタマイズすることができます。

まずは、オプションのarrowsを有効にし、prevArrow・nextArrowの値に、文字列でHTML要素を任意のクラス名を付けて指定します。

$(function () {
  $(".slider").slick({
    arrows: true, // 前後の矢印を有効にする    prevArrow: "<button class='slide-prev slide-arrow'></button>", // 前へボタン    nextArrow: "<button class='slide-next slide-arrow'></button>", // 次へボタン  });
});

あとは先ほどオプションに指定した要素をセレクタで指定し、CSSを記述すればOKです。

以下はサンプルになります。

.slide-arrow {
  /* 矢印共通のスタイル */
  width: 15px;
  height: 15px;
  transition: transform 0.3s;
  position: absolute;
  top: 50%;
  cursor: pointer;
}
.slide-prev {
  /* 前へ矢印のスタイル */
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  transform: rotate(-45deg);
  left: -25px;
}
.slide-next {
  /* 次へ矢印のスタイル */
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(45deg);
  right: -25px;
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
}

ドットナビゲーションのカスタマイズ

スライダー下部のドットナビゲーションも、オプションを指定することでカスタマイズ可能です。

まずは、dotsを有効にして、dotsClassオプションにドットナビゲーションのクラス名を指定して、そのクラス名をセレクタとしてCSSを記述します。

$(function () {
  $(".slider").slick({
    dots: true, // ドットナビゲーションを有効にする    dotsClass: "slide-dots", // ドットナビのクラス名を指定  });
});

先のスライド移動の矢印とは異なり、クラス名を指定するのみとなります。

ドットの要素はul.slide-dots>li>buttonのような構成となり、button内にはデフォルトで数字が入ります。

なのでCSSは、基本は次のようになります。

.slide-dots{
  /* ドットナビのコンテナのスタイル */
}
.slide-dots li {
  /* ドットナビ単体のスタイル */
}
.slide-dots li button {
  
  /* 元々ドットナビに入ってる文字を消す */
  font-size: 0;
  color: transparent;
}
.slide-dots li button::before {
  /* ドットナビに文字などを指定する */
}
.slide-dots li.slick-active button::before {
  /* 現在選択されているドットナビの文字などを指定する */
}

以下はサンプルになります。

.slide-dots {
  width: 100%;
  padding-top: 10px;
  text-align: center;
  list-style: none;
}
.slide-dots li {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
}
.slide-dots li button {
  border: 0;
  background: 0;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}
.slide-dots li button::before {
  content: "☆";
  font-size: 16px;
  color: black;
}
.slide-dots li.slick-active button::before {
  content: "★";
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
}

レスポンシブ化する

responsiveで、画面幅毎にスライダーの見た目を変更できますが、指定する値については以下のような形での指定になります。

$(".slider").slick({
  ...
  responsive: [ // レスポンシブスタイルを指定
    {      breakpoint: 401,  // ここで指定した画面幅未満の時、settings内のオプションが適用される      settings: {         dots: false, // 上書きするオプションを指定する        centerMode: false // 上書きするオプションを指定する      }    }  ]
});

網掛けの部分をカンマ区切りで複数記述して、ブレイクポイントを複数箇所にすることも可能です。

ScrollRevealを使ってふわっと表示

スクロールによってふわっと表示します。

ScrollRevealというライブラリを使用しています。

様々なオプションがあるため、自分で「スクロールして表示」を実装するよりも簡単に色々な効果を付けることが出来ます。

CDNでライブラリを読込む

ScrollRevealライブラリを取得するため、https://scrollrevealjs.org/guide/installation.htmlを開きます。

CDN経由で読込できる<script>があるので、コードをコピーします。

scroll_reveal

コピーした<script>は、<body>の最後に貼り付けます。(<head>内に入れる場合はdefer属性を付けるのを忘れずに)

<body>
...
<!-- ScrollRevealライブラリの読込 -->
<script src="https://unpkg.com/scrollreveal"></script>
</body>

ScrollRevealを実装する

ここまで準備ができたら、

  • スクロールでふわっと表示させたい要素を記述する。
<p class="txt reveal1">本文が右から現れます</p>
  • ScrollReveal().reveal("セレクタ",オプション)とする。(セレクタはCSSと同様)
ScrollReveal().reveal(".reveal1");

オプションを追加する

オプションは、オブジェクトで{オプション: 指定する値, オプション: 指定する値, ...}として引数に指定することが可能です。

よく使うオプションと、指定する値には以下のようなものがあります。

オプション指定する値と効果初期値
originアニメーションの起点を文字列で指定する。 top,bottom,left,rightのいずれかを指定bottom
distanceアニメーションの距離を文字列で指定する。CSSで有効な単位（rem、%、vwなど）が使える20px
durationアニメーションの長さを数値で指定する。（ミリ秒 / 1秒 = 1000）500
delayアニメーションの遅延を数値で指定する。0
opacityアニメーションが始まるときの透明度を数値で指定する。0

まとめ

複雑な動きでもこのようなライブラリを使用すると比較的簡単に実装することができます。

他にも色々なライブラリがあるので、探してみるのも面白いかもしれません。