【Swiper】背景画像を自動スライダーさせる方法

JavaScript

今回は、「Swiperを使って背景画像を自動スライダーさせる方法」について紹介します。

企業のコーポレートサイトでも、ファーストビューの画像がスライダーするWEBサイトを見たことがあるでしょう。

【Swiper】背景画像を自動スライダーさせる方法

完成形はこちらです。

それでは早速コーディングしていきましょう。

Swiperの準備

Swiperを使うために、まずは以下のコードを書きましょう。

◎headタグの中に書く

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

◎bodyタグの閉じタグ直前に書く

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQueryとSwiperのCDNを書きます。

HTML

<!-- 背景 -->

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background:url('./image/1.JPG') no-repeat;background-size:cover;background-position:center center;"></div>
        <div class="swiper-slide" style="background:url('./image/2.JPG') no-repeat;background-size:cover;background-position:center center;"></div>
        <div class="swiper-slide" style="background:url('./image/3.JPG') no-repeat;background-size:cover;background-position:center center;"></div>
        <div class="swiper-slide" style="background:url('./image/4.JPG') no-repeat;background-size:cover;background-position:center center;"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

画像パスはお好みで変えてみてください。

CSS

背景画像は、ブラウザ幅に対して相対的になるようにしました。

.swiper-container {
    position: relative;
    padding-top: unquote("min((100vh - 85px),75%)");
    .swiper-wrapper {
        position: absolute;
        top: 0;
        left: 0;
    }
}

JavaScript

背景画像は5秒で自動的に切り替わるようにしました。

var swiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
    },
    autoplay: {
        delay: 5000,
        disableOnInteraction: true
    },
    effect: 'fade',
});

まとめ

以上が、「Swiperを使って背景画像を自動スライダーさせる方法」でした。

是非真似してコーディングしてみてください。

 

関連記事:

【Swiper】サムネイル付き画像スライダーの作り方 【有益】大学生におすすめの本まとめ20選【2020年最新版】 【Swiper】縦横比を保ったまま画像スライダーする方法 【ブログ運営報告】大学生がブログを1ヶ月続けた結果【PV数】