徘徊するゴリラ

ジャングルを歩きまわることから1日が始まる

威嚇するゴリラ

メスを守るためにオスは強くならなくてはならない

驚くゴリラ

ゴリラだってびっくりしてもいいじゃない

背景をフェード でスライドさせる
swiper.jsの使い方デモページ

head

                               
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
                               
                           

JavaScript

                               
if (document.querySelector(".swiper-container")) {
     var mySwiper = new Swiper(".swiper-container", {
     loop: true, //ループさせる
     effect: "fade", //フェードのエフェクト
     autoplay: {
     delay: 4000, //4秒後に次の画像へ
     disableOnInteraction: false //ユーザー操作後に自動再生を再開する
     },
     speed: 2000 //2秒かけながら次の画像へ移動
     });
}
                               
                           

sass

                               
<!-- 画像部分 -->
.swiper-wrapper .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh; //お好みで調整
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

<!-- テキスト部分 -->
.txt_area{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    top: 45%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 50px;
    h3{
        font-size: 4em;
        padding-bottom: 10px;
        letter-spacing: -.05em;
    }
    .txt{
        font-size: 2.1em;
    }
}

                               
                           

HTML

                           
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url('./images/fadeslide01.jpg');">
            <div class="txt_area">
                <h3>徘徊するゴリラ</h3>
                <div class="txt">
                    <p>ジャングルを歩きまわることから1日が始まる</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide" style="background-image: url('./images/fadeslide02.jpg');">
            <div class="txt_area">
                <h3>威嚇するゴリラ</h3>
                <div class="txt">
                    <p>メスを守るためにオスは強くならなくてはならない</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide" style="background-image: url('./images/fadeslide03.jpg');">
            <div class="txt_area">
                <h3>驚くゴリラ</h3>
                <div class="txt">
                    <p>ゴリラだってびっくりしてもいいじゃない</p>
                </div>
            </div>
        </div>
    </div>

    <!-- pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>

    <!-- navigation buttons -->
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>

</div>