デイトラWeb制作コース中級編DAY23 スライダー(カルーセル)を作る②

下準備として、カンプからアローアイコンの画像をpngでダウンロードし、リネームしてimgフォルダに入れておきます。

スライダーのコーディングmultiple編 jQuery

私はCDNを利用しました。

CDNのCSSをhead内に、JSをbodyの終了タグの直前にコピペします。CSSは、style.cssより前にペーストします。JSはjsフォルダ内にscript.jsを新しく作ります。(回答例のようにHTMLファイルに直書きでもOK)

var mySwiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
  loop: true,
  slidesPerView: 1,
  spaceBetween: 28,
  initialSlide: 1,
  breakpoints: {
    767: {
      slidesPerView: 3,
      spaceBetween: 28,
      initialSlide: 1,
    }
  },
});

スライダーのコーディングmultiple編 HTML

カードのセクションを.section-titleの下から

• .card__sliders
• .swiper
• .swiper__wrapper

で括ります。

一枚一枚のカードを.swiper-slideで囲みます。

※動画ではSwiperの親クラスが「.swiper-container」ですが、新しいバージョンでは「.swiper」である点に注意です。

スライダーのコーディングmultiple編 CSS

.card__sliders

カード全てを括るクラス。上マージンを空け、セクションタイトルと距離をとります。

横幅は100％。それ以上広がらないようにmax-widthを設定します。

.swiper

スライド全体を括るクラス。ページネーションの分、下パディングをとります。

SP版で左右のパディングを少しだけとります。

.swiper-button-prev, .swiper-button-next

左矢印と右矢印の共通スタイルをまとめて。

top、bottomで位置を調整します。幅と高さをカンプから読み取って設定。
marginは0にしてカツカツに。

※Swiper8系ではz-indexの値を大きくしないと矢印が下に隠れます。bottomの値も大きめにします。

擬似要素に空の値を入れて、デフォルトのアローアイコンを消します。

.swiper-button-prev

左矢印。calcを使い配置します。

• まず右(right)から50％の位置(半分)に持ってきます
• 更にページネーション全体の半分の数値を足します

leftはautoにします。背景画像として左矢印の画像を配置します。

.swiper-button-next

今度は上の逆をやればOKです。

rightはautoにします。

• 次に左(left)から50％の位置(半分)に持ってきます
• 更にページネーション全体の半分の数値を足します

背景画像として右矢印の画像を配置します。

.swiper-pagination-bullet

直訳すると弾丸。下のポツポツというか点々というか…以下ドットと呼びます。のひとつひとつを括るクラス。

直径12pxにします。色は白に。opacityを1にしてクッキリさせます。

.swiper-pagination-bullet-active

アクティブなスライドのドットに色がつくようにします。カンプから読み取った色を指定します。

.swiper-container-horizontal > .swiper-pagination-bullets

全てのドットを括るクラス。bottomで下からの位置を指定します。z-index: 2;にしてスライドより前面、アローアイコンよりは背面のレイヤーにします。

入れ子にした.swiper-pagination-bulletに左右のマージンを指定します。

次は「スクロールに応じて要素を「フワッ」と登場させる」です。