Swiperでテキストを重ねた画像をフェードインさせる

公開日:2021/09/21

JavaScript PROGRAMMING

こんにちは、つるみなおや（@tsuruchan_web）です。

Swiperを使ってテキストを重ねた画像をフェードインさせるコードの備忘録です。

Swiperはスライダーを簡単に実装できるJavaScriptライブラリです。jQueryに依存していない点と、スライダーに関するさまざまなオプションを設定することができる点がとても気に入っています。

今回は、最近のサイトでよくある「ファーストビューの画像がフェードインで移り変わっていく」という実装をSwiperでやってみました。

さらに「それぞれの画像にテキストが重なっていて、テキストも画像と同時にフェードインする」という実装もよく見るので、その実装も同時にしています。

コピペ可能なのでよかったら使ってみてください。

Swiperを読み込む

今回はCDNで読み込んでいます。（バージョン6.8.0の情報です。）

swiper-bundle.min.cssは<head>内、swiper-bundle.min.jsは</body>の手前に記載するといいでしょう。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

WordPressで使用する場合は、functions.phpに以下のコードを記述すればオッケーです。

function add_swiper() {
    wp_enqueue_style( 
        'my_swiper_css', // 任意のハンドル名
        'https://unpkg.com/swiper/swiper-bundle.min.css' ,
        array(), // 依存関係があればarrayの中に記入
        NULL, // バージョン情報を指定
    );
    wp_enqueue_script( 
        'my_swiper_js', // 任意のハンドル名
        'https://unpkg.com/swiper/swiper-bundle.min.js', 
        array(), // 依存関係があればarrayの中に記入
        NULL, // バージョン情報を指定
        true, // </body>の直前で読み込み
    );
}
add_action('wp_enqueue_scripts', 'add_swiper');