【第2弾】swiperを使用してpararax sliderを実装してみた

今回は「swiperを使用してパララックススライダーを実装してみました」第2弾です。
第一弾が気になる方はこちら↓↓から見てみてください。

【第一弾】swiperを使用してpararax sliderを実装してみた

では実際のデモから！

See the Pen
swiperを使用してpararax sliderを実装してみた02 by sayuri (@giraffeweb)
on CodePen.0

ソースの解説をしていきます。まずはHTMLからです。

<div id="slideImage">
     <div class="swiper"> //swiper-contentは少し古い書き方なので注意です。swiperですよ
        <div class="swiper-wrapper">
　　　　　//slider1枚目ここから
          <div class="swiper-slide">
            <a href=""><picture class="mainImg" style="background-image:url(https://i.postimg.cc/pdNMqXKP/05.jpg);">
               <img class="entryImg" src="https://i.postimg.cc/pdNMqXKP/05.jpg" alt="">
            </picture>
            <div class="catch flex">
              <h2 class="en">Lorem ipsum dolor sit amet</h2></div>
            </a>
       </div>
　　　　　//slider1枚目ここまで
       <div class="swiper-slide">
          //2枚目の中身省略
      </div>
    </div>
　　//↓↓左に表示されている数字メニュー
    <div class="swiper-pg"></div>
　　//↑↑左に表示されている数字メニュー
    </div>
  </div>
</section>

CSSは以下の通り。
そんなに複雑な記載はないのでそのままコピペして使ってもらっていいと思います。

#slideImage {
        .swiper {
            position: relative;
            .swiper-slide {
                backface-visibility:hidden;
                -webkit-backface-visibility:hidden;
                a {
                    width: 100%;
                    height: 100vh;
                    display: block;
                    position: relative;
                    color: #fff;
                    picture {
                        display: block;
                        position:absolute;
                        top:0;
                        left:0;
                        width:100%;
                        height:100%;
                        background-position:center;
                        background-size:cover;
                        img {
                            display:none;
                        }
                    }
                }
            }
        }
        .swiper-pg {
           position: absolute;
            color: #fff;
            width: 48px;
            left: 5vw;
            top: 50%;
            transform: translate(-50%,0);
            z-index: 10;
        }
    }

重要なのはJSです。
かならず「parallax: true」にすること。そして『effect: “creative”』にして「creativeEffect」でtranslateを設定してあげてください。
これでパララックスのスライダーが実装できます！

const auto_change_time = 5000;
let mySwiper = new Swiper('#slideImage .swiper', {
    speed: 2000,
    parallax: true,
    loop: true,
    preventInteractionOnTransition: true,
    autoplay: {
        delay: auto_change_time,
        disableOnInteraction: false,
    },
    effect: "creative",
    creativeEffect: {
        prev: {
            shadow: true,
            translate: ["-20%", 0, -1],
        },
        next: {
            translate: ["100%", 0, 0],
        },
    },
    pagination: {//左の数字のメニュー部分
        el: '.swiper-pg',
        clickable: true,
        type: 'bullets',
        renderBullet: (index, className) => {
        return '<span class="' + className + '">0' + (Number(index) + 1) + '<svg class="circle" width="48" height="48" viewBox="0 0 48 48"><circle class="circle2" cx="23.5" cy="23.5" r="23" stroke="#e5eef5" stroke-width="1" fill="none"/><circle class="circle1" cx="24" cy="24" r="23" stroke="#ffffff" stroke-width="2" fill="none"/></svg></span>';
        },
    },
    on:{
        slideChangeTransitionEnd:function(swiper){
            fadeInText();//キャッチコピーの文字部分の処理
        },
        snapIndexChange:function(){
        }
    },
});

//ここはキャッチコピーの文字部分
function fadeInText(){
    const $all_catch = $('.catch');
    $all_catch.removeClass('remove');
    $all_catch.removeClass('active');
    
    const $active_slide = $('.swiper-slide-active');
    const $slide_catch = $active_slide.find('.catch');
    $slide_catch.addClass('active');
    $slide_catch.delay(auto_change_time - 2500).queue(function(){
        $slide_catch.addClass('remove').dequeue();
    });
}

お試しあれ！

Share: