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

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

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

私はCDNを利用しました。

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

const swiper = new Swiper('.swiper', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

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

方法は2種類あります。好きな方を選びましょう。

①swiperのGetting StartedのAdd Swiper HTML Layoutのコードをコピーして、.mainvisualの中に5回コピペを繰り返します。「一番伝えたい事を書く」に1〜5の番号を振ります。スクロールバーの部分はいらないので削ります。

②以下みたくHTMLに画像を直接貼ります。①と同じくコピペして5つにし番号を振ります。

<div class="swiper-slide">
 <div class="slide__img">
  <img src="img/mainvisual.png"> /* 余裕がある方は5つ別々の画像を用意するとそれっぽい */
 </div>
 <div class="mainvisual__content">
   <div class="mainvisual__title">一番伝えたい<br class="hidden-tab hidden-pc">ことを書く1</div><!-- /.mainvisual__title -->
   <div class="mainvisual__lead">リードリードリード</div><!-- /.mainvisual__lead -->
   <div class="mainvisual__button"><a class="button-mainvisual" href="">お問い合わせ</a></div><!-- /.mainvisual__button -->
 </div><!-- /.mainvisual__content -->
</div>

あとは以下のページを参考に、ポリフィルを導入し、CSSでスタイリングします。※下で解説しています。

https://memo.abridge-lab.com/?p=196

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

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

.slide__img

こちらはスライド画像の貼り付けにobject-fitプロパティを使った場合のコード例です。CSSのbackgroundプロパティを使った場合はこの部分は必要ありません。

.slide__img>img {
    position: relative;
    height: 600px;
    width: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
　　 vertical-align:bottom;

    @include mq('tab') {
        height: 600px;
    }

    @include mq('sp') {
        height: 500px;
    }
}

.swiper-slide

一枚一枚のスライドを括るクラス。position: relative;にし、mainvisual__contentを乗っける下地を作ります。高さを数値、幅を％で指定します。背景にスライドの画像を設定します。

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

左矢印と右矢印の共通スタイルをまとめて。幅と高さをカンプから読み取って設定します。

top: 50%;で垂直方向真ん中に来ているアローアイコンですが少し上にズレるため、margin-topに画像の半分の幅のネガティブマージンを設定して「戻してあげる」事が必要になります。

z-index: 3;にして画像の前面に矢印が載るようにします。

&:hoverはいつも通りopacityで透過させます。content: “”;とすることでデフォルトのアローアイコンを消します。

.swiper-button-prev

以下のツイートが参考になります。画像の幅のサイズは$layout-width-innerが使えます。スニペット登録するといいですね！

コピペできるようにテキストにしておきました。

.prev_arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(clac(-50% - (900px / 2)),-50%);
}

.next_arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(clac(-50% + (900px / 2)),-50%);
}

タブレットとSP版ではpositionで左を空けます。(数値)

.swiper-button-next

上の項目を参照ください。

タブレットとSP版ではpositionで右を空けます。(数値)

.swiper-pagination-bullet

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

PC版は直径16px、スマホ版では半分にします。色は白に。opacityを1にして不透明にします。

.swiper-pagination-bullet-active

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

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

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

入れ子にした.swiper-pagination-bulletに左右のマージンを指定します。(ドットとドットの間を空ける)

次はカード形式のスライダーのコーディングです。