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

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

こんにちは、つるみなおや(@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');

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

以下がコードです。

See the Pen
Swiper.jsで文字を重ねる
by つるみなおや (@trmnaoya)
on CodePen.

<div class=”swiper-container”><div class=”swiper-wrapper”><div class=”swiper-slide”>がSwiper独自のクラスです。

それぞれの画像を<div class=”swiper-slide”>のbackground-imageに指定して、その中にテキストを絶対配置させています。

Swiperで指定できるオプションはとても数が多いのでSwiperの公式ページで確認してみてください。

以上です。

Swiperを使えば簡単にスライダー機能を実装できるのでおすすめです!

参考になれば幸いです。

\シェアしてね!/