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でズームさせるアニメーションを付けたりもしてなおいい感じに!

是非お試しを。

javascript
スポンサーリンク
Web Parts Box
タイトルとURLをコピーしました