fotorama.jsを使って、背景フルスクリーンのスライドショーをつくる

こんにちは！
今日はfotorama.jsを使って背景フルスクリーンのスライドショーをつくります！
PCとスマホそれぞれ対応するときに背景に画像をおいておいたほうが楽だったりします。

で、fotoramaを使用したのですが、背景画像に組み込めない…だと？

下記のようにソースを書いてもうんとも、すんとも動きませんでした。

<div class="fotorama">
 <div style="background-image: images01.jpg"><div>
 <div style="background-image: images02.jpg"><div>
 <div style="background-image: images03.jpg"><div>
</div>

で、通常通りにソースを戻します。
※fotoramaの基本的な使い方がわからないかたは、調べてみてね！
※ネット上にたくさんでてきますので★

<div class="fotorama">
   <img src="images01.jpg">
   <img src="images02.jpg">
   <img src="images03.jpg">
</div>

JSで無理くり背景っぽく動かします。

<script>
    $(function(){
      $('.fotorama').fotorama({
        width: '100%',
        height: '100%',
        margin: 0,
        fit: 'cover',
        nav: 'none',      
      });
    });
  </script>

あとはCSSで調整で実装完了です～！

.fotorama{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -99999;
  }

同じようなことで困っている方
参考にお役だてください～！

Share: