便利なスライダーライブラリ「Swiper」。
WordPressで使う場合の設定方法も解説します。
Swiperのバージョンは8です。
jQueryが不要なので、さくさく動きます。
読み込みの設定
静的サイトの場合
<head>
～～～
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
</head>
～～～
※bodyタグ閉じる直前
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="js/swiper-conf.js"></script>
</body>※swiper-conf.jsはlightgalleryを実際に動かすための設定ファイルです。
後ほど新規作成します。
WordPressの場合
functions.phpに書きます。
function my_enqueue_scripts(){
wp_register_style(
"swiper-css",
"https://unpkg.com/swiper@8/swiper-bundle.min.css"
);
wp_enqueue_style( 'swiper-css' );
wp_enqueue_script(
"swiper-js",
"https://unpkg.com/swiper@8/swiper-bundle.min.js",
array(),
false,
true
);
//実際に動かすための設定ファイル
wp_enqueue_script(
"swiper-conf",
get_theme_file_uri("js/swiper-conf.js"),
array("swiper-js"),
false,
true
);
//style.cssでlightgallery.cssを上書きする場合は、第三引数に指定
wp_enqueue_style(
"style",
get_stylesheet_uri(),
array("swiper-css"),
filemtime(get_stylesheet_directory())
);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
※swiper-conf.jsはlightgalleryを実際に動かすための設定ファイルです。
後ほど新規作成します。
style.cssの前にSwiperのcssファイルを読み込むのがポイントです。
HTMLマークアップ
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slides （いくつでも）-->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
このほかに、ページネーションや左右の矢印ボタンなども設置できます。
swiper-conf.jsで実際に動かす
swiper-conf.jsという名前のファイルを新規作成してください。ファイルの中身は以下のとおり。
const swiper = new Swiper('.swiper', {
// オプションなど
effect: 'fade',
loop: true
});この他のオプションは、公式サイトのSwiper API Parametersを見てください。
ウェブサーバーに、FTPで接続し、jsディレクトリを作成してください。WordPressなら、テーマフォルダにjsディレクトリを作成します。
作成したディレクトリに、このswiper-conf.jsをアップロードします。
