Swiper によるスライダー～エフェクト coverflow

はたらくわかもの【1】

Swiper.js のスライダーで Coverflow エフェクトを指定しています。

はたらくわかもの【2】

Swiper.js のスライダーで Coverflow エフェクトを指定しています。

はたらくわかもの【3】

Swiper.js のスライダーで Coverflow エフェクトを指定しています。

はたらくわかもの【1】

Swiper.js のスライダーで Coverflow エフェクトを指定しています。

はたらくわかもの【2】

Swiper.js のスライダーで Coverflow エフェクトを指定しています。

はたらくわかもの【3】

Swiper.js のスライダーで Coverflow エフェクトを指定しています。

Lightning Pro に組み込まれているライブラリ Swiper を使って、coverflow エフェクトのスライダーを作りました。

HTML

Outer ブロックの中に以下の カスタム HTML ブロックを入れている。

<div class="swiper-container-1 loading">
   <div class="swiper-wrapper">

     <div class="swiper-slide" style="background-image:url(https://lightning.hp2.work/wp-content/uploads/2021/07/1-1200.webp)">
       <img src="https://lightning.hp2.work/wp-content/uploads/2021/07/1-1200.webp" class="entity-img">
       <div class="content">
         <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">はたらくわかもの【1】</p>
         <span class="caption" data-swiper-parallax="-20%">Swiper.js のスライダーで Coverflow エフェクトを指定しています。</span>
       </div>
     </div>

     <div class="swiper-slide" style="background-image:url(https://lightning.hp2.work/wp-content/uploads/2021/07/2-1200.webp)">
       <img src="https://lightning.hp2.work/wp-content/uploads/2021/07/2-1200.webp" class="entity-img">
       <div class="content">
         <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">はたらくわかもの【2】</p>
         <span class="caption" data-swiper-parallax="-20%">Swiper.js のスライダーで Coverflow エフェクトを指定しています。</span>
       </div>
     </div>

     <div class="swiper-slide" style="background-image:url(https://lightning.hp2.work/wp-content/uploads/2021/07/3-1200.webp)">
       <img src="https://lightning.hp2.work/wp-content/uploads/2021/07/3-1200.webp" class="entity-img">
       <div class="content">
         <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">はたらくわかもの【3】</p>
         <span class="caption" data-swiper-parallax="-20%">Swiper.js のスライダーで Coverflow エフェクトを指定しています。</span>
       </div>
     </div>

     <div class="swiper-slide" style="background-image:url(https://lightning.hp2.work/wp-content/uploads/2021/07/1-1200.webp)">
       <img src="https://lightning.hp2.work/wp-content/uploads/2021/07/1-1200.webp" class="entity-img">
       <div class="content">
         <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">はたらくわかもの【1】</p>
         <span class="caption" data-swiper-parallax="-20%">Swiper.js のスライダーで Coverflow エフェクトを指定しています。</span>
       </div>
     </div>

     <div class="swiper-slide" style="background-image:url(https://lightning.hp2.work/wp-content/uploads/2021/07/2-1200.webp)">
       <img src="https://lightning.hp2.work/wp-content/uploads/2021/07/2-1200.webp" class="entity-img">
       <div class="content">
         <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">はたらくわかもの【2】</p>
         <span class="caption" data-swiper-parallax="-20%">Swiper.js のスライダーで Coverflow エフェクトを指定しています。</span>
       </div>
     </div>

     <div class="swiper-slide" style="background-image:url(https://lightning.hp2.work/wp-content/uploads/2021/07/3-1200.webp)">
       <img src="https://lightning.hp2.work/wp-content/uploads/2021/07/3-1200.webp" class="entity-img">
       <div class="content">
         <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">はたらくわかもの【3】</p>
         <span class="caption" data-swiper-parallax="-20%">Swiper.js のスライダーで Coverflow エフェクトを指定しています。</span>
       </div>
     </div>

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

CSS

img{ vertical-align:top; }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before,
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
[class^=swiper-button-] {
  transition: all 0.3s ease;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.swiper-container-1 {
  width: 100%;
  height: 28vw;
  transition: opacity 0.6s ease;
}
.swiper-container-1.swiper-container-coverflow {
  padding-top: 1vh;
  padding-bottom: 1vh;
}
.swiper-container-1.loading {
  opacity: 0;
  visibility: hidden;
}
.swiper-container-1:hover .swiper-button-prev,
.swiper-container-1:hover .swiper-button-next {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  color: #fff;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
}
.swiper-slide .entity-img {
  display: none;
}
.swiper-slide .content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 70%;
  padding-left: 5%;
  color: #fff;
}
.swiper-slide .content .title {
  font-size: 2.0em;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 2px 2px 1px #000;
}
.swiper-slide .content .caption {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  text-shadow: 1px 1px 1px #000;
}

[class^=swiper-button-] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.swiper-button-prev {
  transform: translateX(50px);
}

.swiper-button-next {
  transform: translateX(-50px);
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 0.4;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}
@media (max-width: 1180px) {
  .swiper-slide .content {
  width: 100%;
  top: 20%;
  }
  .swiper-slide .content .title {
    font-size: 25px;
  }
  .swiper-slide .content .caption {
    font-size: 12px;
  }
}
@media (max-width: 1023px) {
  .swiper-container-1 {
    height: 40vw;
  }
  .swiper-container-1.swiper-container-coverflow {
    padding-top: 0;
    padding-bottom: 0;
  }
}

JavaScript

var sliderSelector = '.swiper-container-1',
    options = {
      init: false,
      loop: true,
      autoplay: {
        delay: 4000,
      },
      speed:800,
      slidesPerView: 1,
      breakpoints: {
        1023: {
          slidesPerView: 2,
          spaceBetween: 0
        }
      },
      centeredSlides : true,
      effect: 'coverflow',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true,
      },
      grabCursor: true,
      parallax: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 画像を読み込んでから表示する
      on: {
        afterInit: function(){
          this.el.classList.remove('loading');
        }
      }
    };
var mySwiper = new Swiper(sliderSelector, options);

// Initialize slider
mySwiper.init();

参考にしたサイト

CodePen https://codepen.io/digistate/pen/KZWYwo

カルーセルの決定版－ VK Blocks Pro のグリッドカラムによる実装例

VK Blocks Pro の投稿リストをカルーセル表示したカスタマイズ例【完結編】

Swiper によるスライダー ～ エフェクト coverflow

HTML

CSS

JavaScript

参考にしたサイト

関連記事

Swiper によるスライダー～エフェクト coverflow