1年に一度の超セール!Amazonブラックフライデー! ※11/26(金)~12/2日(木)まで!セール品を見る

【Swiper.js】サムネイル付きスライダーを作成する方法

スライダーを入れる時に、Meta Sliderのプラグインを良く使います。

しかしサムネイル付きスライダーを作成するには有料版を契約しないといけません。

ということで、有名なSwiper.jsを使ってサムネイル付きスライダーを作成(カスタマイズ)してみました!(スワイプもできます)

すいみん

カラムに入れるとマイベストっぽくなりますね。

ここにテキストが入ります。

ここにテキストが入ります。

ここにテキストが入ります。

ここにテキストが入ります。

ここにテキストが入ります。

目次

WordPressでサムネイル付きスライダーを作成する方法

Swiper.jsというライブラリを使用しています。

これは jQuery使わないので、SWELLなどのテーマと相性が良さそうです。

STEP

HTMLの作成

基本的にSwiperのHTMLです。

画像のパスは手動でいれてください。※連番にしてください

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://www.cg-method.com/side-job/wp-content/uploads/s01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://www.cg-method.com/side-job/wp-content/uploads/s02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://www.cg-method.com/side-job/wp-content/uploads/s03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://www.cg-method.com/side-job/wp-content/uploads/s04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://www.cg-method.com/side-job/wp-content/uploads/s05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://www.cg-method.com/side-job/wp-content/uploads/s06.jpg" alt=""></div>
  </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  <div class="swiper-my-pagination"></div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</div>

コードの最後にSwiperのJSを読み込んでいます。

コードをダウンロードして子テーマから読み込みたい時は下記のコードをfunctions.phpにいれてみてください。

function load_script_init() {
	wp_enqueue_style( 'main-script', get_stylesheet_directory_uri() .'/css/swiper.min.css');
	wp_enqueue_script( 'main-script', get_stylesheet_directory_uri() .'/js/swiper.min.js');
}
add_action( 'wp_enqueue_scripts', 'load_script_init' );
STEP

CSSの挿入

SwiperのCSSを挿入します。

こちらの見た目はお好みにどうぞ。

.swiper-my-pagination .swiper-pagination-bullet {
  width: auto;
  height: auto;
  border-radius: 0;
}
.swiper-container-horizontal
  > .swiper-my-pagination.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0;
}
.swiper-my-pagination {
  margin-bottom: 5px;
  table-layout: fixed;
  display: table;
}
.swiper-my-pagination img {
  box-shadow: none;
  margin: 0;
  vertical-align: bottom;
}
.swiper-my-pagination .swiper-pagination-bullet {
  display: table-cell;
  padding: 2px;
  background: transparent;
  opacity: 1;
}
.swiper-my-pagination .swiper-pagination-bullet {
  background: transparent;
  opacity: 0.2;
}
.swiper-my-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  top: 43%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  top: 43%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-pagination-bullet img {
  width: 100%;
  height: 30px;
  object-fit: cover;
}
span.swiper-pagination-bullet {
  z-index: 10;
}

.swiper-button-next,
.swiper-button-prev {
  width: 8%;
  height: 8%;
  margin-top: -16px;
  background-size: 18px 28px;
}

STEP

JavaScriptの挿入

SwiperのJavaScriptコードです。

画像は連番にしておくとサムネイルのコードを自動生成できます。

下記の記事を参考にさせていただきました。パス部分はは手動で変更してください。

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-my-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + '<img src="https://www.cg-method.com/side-job/wp-content/uploads/s0' + (index + 1) + '.jpg" alt="">' + '</span>';
    },
  },
});

JavaScriptをfunctions.phpに入れてあげる場合はこちら。

function my_swiper() {
$my_swiper = <<<EOM

<!-- headに表示させたいコードはここにいれる-->

EOM;
echo $my_swiper;
}
add_action( 'wp_head', 'my_swiper', 99);

WordPressでサムネイル付きスライダーを作成する方法まとめ

本記事では「【Swiper.js】Wordpressでサムネイル付きスライダーを作成する方法」について書きました。

Swiperにはさまざまオプションが付いていて、どんなスライダーでも作成できる応用力があります。

気になる方は公式のデモページをみてください。

サムネイル付きスライダー

すいみん

マイベストっぽいサムネ付きスライダーが作成できます。

【Swiper.js】サムネイル付きスライダーを作成する方法

目次
閉じる