デイトラweb制作中級編 DAY23

スライダー(カルーセル)を作る

①JavaScript

JavaScriptのライブラリの「Swiper」を使ってスライダーを作成

const swiper = new Swiper('.swiper', {
    loop: true,

    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

元のコードからの変更点

「direction: 'vertical'」を削除

→ 横方向にスライドさせるため

「clickable: true」を追加

→ ページネーションが反応するようになる

②HTML

<div class="swiper">
    <div class="swiper-wrapper">
        <!-- ここから -->
        <div class="swiper-slide">
            <div class="main-visual">
                <div class="main-visual__content">
                    <div class="main-visual__title">一番伝えたいことを書く</div>
                    <div class="main-visual__lead">リードリードリード</div>
                    <div class="main-visual__button"><a href="">お問い合わせ</a></div>
                </div>
            </div>
        </div>
        <!-- ここまで5セット -->
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

③SCSS(元のCSSを上書き)

デザインカンプのアローアイコンやページネーションは、Swiper標準のデザインとは異なる

→ デベロッパーツールで該当のCSSの値を確認して上書きしていく

アローアイコン

.swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: transparent url(../img/arrow-next.png) no-repeat center center / contain;
    right: calc(50% - #{$layout-width-inner / 2});

    &::after {
        display: none;
    }

    @include mq('tab') {
        right: 10px;
    }

    @include mq('sp') {
        width: 30px;
        height: 30px;
        right: 10px;
    }
}

.swiper-button-prev {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    // 「transparent」は透明
    background: transparent url(../img/arrow-prev.png) no-repeat center center / contain;
    left: calc(50% - #{$layout-width-inner / 2});

    &::after {
        display: none;
    }

    @include mq('tab') {
        left: 10px;
    }

    @include mq('sp') {
        width: 30px;
        height: 30px;
        left: 10px;
    }
}

ヘッダーのインナー幅に揃えたいため、中央基準で配置(PC時)

left: calc(50% - #{$layout-width-inner / 2});

→ 「中央から左に600px」

※「$layout-width-inner」は1200px、変数前の「#」を忘れない!

ページネーション

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: #FFFFFF9E;
    opacity: 1;

    @include mq('sp') {
        width: 11px;
        height: 11px;
    }
}

.swiper-horizontal>.swiper-pagination-bullets
.swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets 
.swiper-pagination-bullet {
    // ドット間の距離
    margin-right: 8px;
}

.swiper-pagination-bullet-active {
    background: #2F7DC8;
}

opacityの設定

元のコードが透明にしているため、「opacity: 1;」で上書き


「opacity: 1;」を書かない場合(見えない) ↓

「main-visual__content」

.main-visual__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;

    @include mq('sp') {
        padding: 0 46px;
    }
}

.main-visual__title {
    font-size: 64px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;

    @include mq('sp') {
        font-size: 32px;
        white-space: normal;
    }
}

スマホ時のpadding

.main-visual__content {
    @include mq('sp') {
        padding: 0 46px;
    }

}


→ タイトルがアローアイコンに被らないようにする

「padding」を入れない場合 ↓

「padding」を入れた場合 ↓

スマホ時は「white-space: normal;」を適用

white-space: nowrap;

→ 自動的な折り返しはしない


white-space:
normal;

→ 初期値(折り返しする)


※white-spaceについては 中級編 DAY12

まとめ

今回はメインヴィジュアルにスライダーの機能を付けました。

始める前は自分で作るのかなぁと少し不安でしたが、先人の凄い人が作ってくれたJavaScriptのライブラリがあったので、ものすごく楽できました!

コメントを残す

メールアドレスが公開されることはありません。