HTML・CSS

swiper.js 4.3.3でトップスライドと記事一覧の調整したコードメモ。

swiper.jsでかんたんに画像のスライダーが設置できる。オプションも豊富だし、便利よね〜。
ただ、Ver5はIE11で使えないんだとか。。。IE対応しなくても・・・って思うけど、まだ使ってる人もいるし、もう少しは対応しておいたほうが安全かなー。
ということで、ver5とjsのオプションの書き方が違ったので4.3.3バージョンで調整したコードをメモメモ。

ver5のスライダーはこちら→swiper.js Ver.5.4.5で簡単にスライダー設置（ナビ・ページネーション調整済）

スライドショーのサンプルはこちら→swiperスライダー433

HTML

<head>内に読み込むcssを記載

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/swiper.css">

ダウンロードしてきても良いんだけど、サイトを軽くするため、swiper.cssをCDNで読み込む。
「assets/css/swiper.css」の名前は何でもOK。自分のオリジナル調整用。

</body>前に読み込むjavascriptを記載

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<script src="assets/js/swiper.js"></script>

CSS同様、ダウンロードしてきても良いんだけど、サイトを軽くするためCDNで読み込む。
「assets/js/swiper.js」の名前は何でもOK。swiperのオプションを記載して自分好みに表示を調整。

スライド部分（メインビジュアル）

<div class="swiper-mv">

<div class="swiper-container slide-top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/img1.jpg" alt=""></div>
<div class="swiper-slide"><img src="assets/images/img2.jpg" alt=""></div>
<div class="swiper-slide"><img src="assets/images/img3.jpg" alt=""></div>
<div class="swiper-slide"><img src="assets/images/img2.jpg" alt=""></div>
</div>

<div class="swiper-pagination swiper-pagination-white"></div><!-- ページネーション -->


</div>
<!-- swiper-container slide-top-->

<div class="swiper-button-prev"></div><!-- ナビゲーションボタン -->
<div class="swiper-button-next"></div><!-- ナビゲーションボタン -->

</div>
<!-- /swiper-mv -->

swiper部分は「<div class=”swiper-container slide-top”>」内です。

スライド部分（記事一覧）

<div class="swiper-article">

<div class="swiper-container article-list">
<div class="swiper-wrapper">
<article class="swiper-slide card mb_M_sp">
<a href="#">
<figure>
<img width="640" height="360" src="assets/images/img1.jpg">
<div class="card_contents">
<h3 class="card_title">テキストテキスト</h3>
<p class="card_time"><time datetime="2020-10-10">2020-10-10</time></p>
</div>
</figure>
</a>
</article>
<article class="swiper-slide card mb_M_sp">
<a href="#">
<figure>
<img width="640" height="360" src="assets/images/img2.jpg">
<div class="card_contents">
<h3 class="card_title">テキストテキスト</h3>
<p class="card_time"><time datetime="2020-10-10">2020-10-10</time></p>
</div>
</figure>
</a>
</article>
<article class="swiper-slide card mb_M_sp">
<a href="#">
<figure>
<img width="640" height="360" src="assets/images/img3.jpg">
<div class="card_contents">
<h3 class="card_title">テキストテキスト</h3>
<p class="card_time"><time datetime="2020-10-10">2020-10-10</time></p>
</div>
</figure>
</a>
</article>
<article class="swiper-slide card mb_M_sp">
<a href="#">
<figure>
<img width="640" height="360" src="assets/images/img1.jpg">
<div class="card_contents">
<h3 class="card_title">テキストテキスト</h3>
<p class="card_time"><time datetime="2020-10-10">2020-10-10</time></p>
</div>
</figure>
</a>
</article>

</div>
<!-- /swiper-wrapper -->
</div>
<!-- /swiper-container article-list -->

<div class="swiper-button-prev"></div><!-- ナビゲーションボタン -->
<div class="swiper-button-next"></div><!-- ナビゲーションボタン -->

</div>
<!-- /swiper-article -->

swiper部分は「<div class=”swiper-container article-list”>」内です。

JavaScript（swiper.jsにオプションを記述して調整）

// トップスライダー
let topSwiper = new Swiper ('.slide-top', {

  // 動きの設定
  loop: true, //最後に達したら先頭に戻る
  autoplay: {
   delay: 5000, //スライド切り替わるまでの時間（秒）
   disableOnInteraction: false,
  },
  speed: 1000, //スライドのスピード（秒）

  //ページネーション（◯のところ）表示の設定
  pagination: {
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  //ナビゲーションボタン（矢印）表示の設定
  navigation: {
    nextEl: '.swiper-button-next', //次へボタン
    prevEl: '.swiper-button-prev', //前へボタン
  },

  // 画像表示の設定
  spaceBetween: 10, //画像間の余白。10px
  autoHeight: true,
  centeredSlides: true, //アクティブ画像を中心に（デフォルトは左端）
  slidesPerView: 2, //前後ろ画像が半分表示される
  breakpoints: { //画面サイズの表示設定
    // 768px以上の場合
    768: {
      slidesPerView: 1, //小数点で前後画像が少し表示される
    },
    // 980px以上の場合
    980: {
      slidesPerView: 1.5, //前後ろ画像が半分表示される
    },
  },

});


// 記事一覧のスライダー
let articleSwiper = new Swiper('.article-list', {
  loop: true, //最後に達したら先頭に戻る
  loopedSlides: 4,
  navigation: {
    nextEl: '.swiper-button-next', //次へボタン
    prevEl: '.swiper-button-prev', //前へボタン
  },

  // 画像表示の設定
  spaceBetween: 30, //画像間の余白。30px
  autoHeight: true,
  slidesPerView: 4, //後ろ画像が表示される
  breakpoints: { //画面サイズの表示設定
    // 768px以上の場合
    768: {
      slidesPerView: 1.5, //小数点で後画像が少し表示される
    },
    // 980px以上の場合
    980: {
      slidesPerView: 3, //後ろ画像が表示される
    },
  }
});

.slide-topでメインビジュアルのトップスライダーの設定。
スマホのときは1枚表示で表示、PCのときは前後の画像が見える仕様に調整。

.article-listで記事一覧のスライダーの設定。
スマホのときは1枚と次のカードを半分表示、PCのときは4枚、タブレットで3枚表示の仕様に調整。

CSS

/* 共通 */
.swiper-container img{
  width: 100%;
}
.swiper-button-prev,
.swiper-button-next{
	background-image: none; /* デフォルトのボタン画像を消す */
}

/* トップスライダー */
.swiper-mv {
  width:100%;
  position: relative;
}
.swiper-mv .swiper-button-prev,
.swiper-mv .swiper-button-next {
	width: 50px; /* ボタンの幅 */
	height: 50px; /* ボタンの高さ */
  opacity: .8;
}
.swiper-mv .swiper-button-prev{
  left: 15px;
}
.swiper-mv .swiper-button-next{
  right: 0;
}
.swiper-mv .swiper-button-prev:before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: .5s;
  transition: .5s;
}
.swiper-mv .swiper-button-next:before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: .5s;
  transition: .5s;
}

/* 記事一覧スライドボタン付き */
.swiper-article{
  padding: 0 15px;
}
@media only screen and (min-width: 769px) {
  .swiper-article{
    margin: 0 auto;
    width: 1050px;
    position: relative;
  }
  .swiper-article .swiper-container{
    width:980px;
    margin: 0 auto;
  }
}


/* 一覧スライドボタンのスタイル */
.swiper-article .swiper-button-prev,
.swiper-article .swiper-button-next{
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,.3);
}
@media only screen and (max-width: 768px) {
  .swiper-article .swiper-button-prev,
  .swiper-article .swiper-button-next{
    top:50%;
  }
}
.swiper-article .swiper-button-prev{
  padding:15px 18px;
  left:0;
}
.swiper-article .swiper-button-prev:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: .5s;
  transition: .5s;
}
.swiper-article .swiper-button-next{
  padding:15px 8px;
  right:0;
}
.swiper-article .swiper-button-next:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: .5s;
  transition: .5s;
}

もっと簡単に少ないコードで書ける気がする。。。
カード部分は自分で好きにコーディングしてね〜。

参考サイト・まとめ

サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編）

上記サイトを参考にさせてもらいました。ありがとうございます。
とても丁寧に解説されていて、いろんなパターンやオプションを確認することができます。

ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。