swiperを使って背景画像のスライダーを作成

背景画像のスライダーといえば　BgSwitcher　などを使って実装することが多かったのですが、

今回swiper.jsを使って実装したら、とてもいい感じになりました。

サンプルはこちら

まずhtmlはこちら。

<div class="swiper-container">
　<div class="swiper-wrapper">
　　<div class="swiper-slide">
　　　<div class="slide-img" style="background-image: url('../swiper-02/img/sample_01.jpg');"></div>	
　　　<p class="chatch _01">どこか旅にでかけたいとあなたは言ったけど</p>						
　　</div>
　　<div class="swiper-slide"> 
　　　<div class="slide-img" style="background-image: url('../swiper-02/img/sample_02.jpg');"></div> 
　　　<p class="chatch _02">ぼんやり写真を眺めて<br>行った気分になることしか</p>    
　　</div>
　　<div class="swiper-slide"> 
　　　<div class="slide-img" style="background-image: url('../swiper-02/img/sample_03.jpg');"></div>   
　　　<p class="chatch _03">できない私たち<br>でも幸せならそれでいい</p>
　　</div>
　</div><!--/.swiper-wrapper-->
</div><!--/.swiper-container-->

続いてcss。

.swiper-container{
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
}
.swiper-wrapper{
  width: 100%;
  height: 100%;
}
.swiper-wrapper .swiper-slide {
  width: 100%;
  height: 100%; 
  background: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.slide-img {
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center center; 
}
.swiper-wrapper .chatch{
  color:#000;
  font-family: 'Noto Serif JP', serif;
  max-width: 80%;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-align: center;
}
.swiper-wrapper .chatch._01{
  top:25%;
}
.swiper-wrapper .chatch._02{
  top:40%;
}
.swiper-wrapper .chatch._03{
  top:30%;
  left:70%;
}

↿それぞれのテキストの表示位置を変えれるように設定。

そしてjs。

var Swiper = new Swiper('.swiper-container', {
　loop: true, //ループさせる
　effect: "fade", //フェードのエフェクト
　autoplay: {
　　　delay: 8000, //8秒後に次の画像へ
　　　disableOnInteraction: false
　},
　speed: 4000, //4秒かけながら次の画像へ移動
　allowTouchMove: false //マウスでのスワイプを禁止        
});

スライドするタイミングとかがちょうどよい感じに仕上がりました。

画像にcssでズームさせるアニメーションを付けたりもしてなおいい感じに！

是非お試しを。