BLOG【Swiper.js】画像が拡大しながらフェードで切り替わるスライダー【テキストも変えられるよ】

だりあ
  1. HOME
  2. ブログ
  3. フロントエンド
  4. 【Swiper.js】画像が拡大しながらフェードで切り替わるスライダー【テキストも変えられるよ】

こんにちわ、こんばんわ。だりあ(https://twitter.com/engineer_dahlia)です。

今日の記事は、スライダーを作ることのできる『Swiper.js』についてです。

Swiper.jsを使ったことがあるマークアップエンジニアさん向けです。

メインビジュアルの画像が拡大しながらフェードで切り替わるサイト、よく見るよね!
あれ実装したいんだけどどうやるの?

【動作確認】
Mac Book Pro:Chrome、Firefox、Safari
Windows:Chrome、Firefox、Edge、IE11

ではいってみましょう!

目次

  1. 【Swiper.js】画像が拡大しながらフェードで切り替わるスライダー
  2. html / cssの準備
    1. 【ポイント】keyframesで画像を拡大させる
  3. jQueryの記述、Swiperのオプション
  4. テキスト変更の必要がない場合
  5. まとめ|画像拡大でテキストは大きさ維持ならSwiper.js

【Swiper.js】画像が拡大しながらフェードで切り替わるスライダー

画像は拡大しながらフェードで切り替わる。ついでにテキストもスライドごとに変更

さっそく、完成形のコードをば。

BEM使っているのですが、それにしてもクラス名が長いですね・・・もう少し短縮させよう・・・

<div class="main-visual">
    <div class="swiper-container-mv">
        <ul class="swiper-wrapper">
            <li class="swiper-slide main-visual__item main-visual__item--1">
                <img src="/img/swiper/swiper01.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--1">ほげほげテキスト</p>
            </li>
            <li class="swiper-slide main-visual__item main-visual__item--2">
                <img src="/img/swiper/swiper02.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--2">ふがふがテキスト</p>
            </li>
            <li class="swiper-slide main-visual__item main-visual__item--3">
                <img src="/img/swiper/swiper03.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--3">ぴよぴよテキスト</p>
            </li>
            <li class="swiper-slide main-visual__item main-visual__item--4">
                <img src="/img/swiper/swiper04.jpg" class="slide-img" alt="">
                <p class="main-visual__copy main-visual__copy--4">hoge fuga piyoテキスト</p>
            </li>
        </ul>
    </div>
    <!-- [/swiper-container] -->
</div>
.main-visual {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    z-index: 9;

    // 各スライド
    &__item {
        position: relative;
        overflow: hidden; // 拡大した画像がはみ出ないようにする

        img {
            width: 100%;
        }
    }

    // キャッチコピー
    &__copy {
        width: 100%;
        font-size: 36px;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        text-align: center;

        // 2枚ずつ違う色のテキストシャドウ入れてみる
        &--1,
        &--3 {
            color: #fff;
            text-shadow: 6px 6px 12px #795427, -6px -6px 12px #795427, 6px -6px 12px #795427, -6px 6px 12px #795427;
        }

        &--2,
        &--4 {
            color: #000;
            text-shadow: 6px 6px 12px #fff, -6px -6px 12px #fff, 6px -6px 12px #fff, -6px 6px 12px #fff;
        }
    }
}

// ここからはswiper付属のcssをアレンジ
.swiper-container-mv .slide-img img{
    display: block;
}

.swiper-container-mv .swiper-slide-active .slide-img,
.swiper-container-mv .swiper-slide-duplicate-active .slide-img,
.swiper-container-mv .swiper-slide-prev .slide-img{
    animation: fadezoom 10s 0s forwards;
}
@keyframes fadezoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);  // 拡大率はお好きなように
    }
}
$(function() {
    let swipeOption = {
        loop: true, // エンドレスリピートさせる
        effect: 'fade', // これがフェードのオプション
        autoplay: {
            delay: 4000,  // 自動再生スピード
            disableOnInteraction: false // ユーザが指やスマホでスライダーに触った時、スライドを止めないように設定するオプション
        },
        speed: 2000
    };
    new Swiper('.swiper-container-mv', swipeOption);
});

html / cssの準備

  1. swiperの雛形を公式GitHubからコピペして作り、liタグの中にimgタグとpタグを配置
  2. pタグは上下左右中央配置に。(デザインによる)
  3. imgタグはwidth: 100%; にしてliタグの大きさいっぱいになるように設定。

雛形はいつもここから持ってきてます:https://github.com/nolimits4web/Swiper/blob/master/demos/010-default.html

【ポイント】keyframesで画像を拡大させる

画像の拡大は@keyframesを使います。transform: scale();で拡大率を指定してあげればOKです

jQueryの記述、Swiperのオプション

  1. 今回はメインビジュアルのスライダーの想定なので、loop: true,
  2. effect: ‘fade’ でフェード切り替えを設定。
  3. ユーザーが触ってもスライドが止まらないようにdisableOnInteraction: false

テキスト変更の必要がない場合

キャッチコピーをスライドごとに変更しなくても良い場合は、swiper-container-mvをposition: relative;にして、その子としてテキストを配置したら良いんじゃないかなと思います。

まとめ|画像拡大でテキストは大きさ維持ならSwiper.js

画像は拡大させるがテキストは大きさ維持』、slickでやってみたらなんだかコードがごちゃごちゃしてしまいました。

この仕様の場合はslickよりもSwiperの方が楽ちんみたいですね!

Swiper.jsを使ってスライダーを実装している方は多いですよね。
他にも色んなオプションがあるので、色々試して見たいと思います

それではっ!