MENU
定年退職者がWEB制作フリーランスになる過程を発信
  1. ホーム
  2. HTML/CSS
  3. 画像のスライド

画像のスライド

HTML/CSS

WEBサイト上では画像が自動的にスライドしているコンテンツをよく見かける。実際の処理しては、JavaScriptのプラグインである、SwiperやSlickなど使用する場合がほとんどである

ちなみに私はスライドの実装でSwiperしか使用したことが無いが
Swiperのメリットとして
１）パラメータやオプションが豊富で、実装できる機能がたくさんある
２）JQuery に依存しないため、JQueryが使用できない状況でも作動する

従って下記では、Swiperによる実装について、解説していく。

目次

標準パターン

まずファーストビューなどで、一定の速度で画像はスライドするパターン

Swiperを以下のように読み込みます

　　<!-- css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css">
  <link rel="stylesheet" href="./css/style.css" />
  <!-- JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js"></script>
   <script src="./js/script.js" defer></script>


HTML、CSS、JSの記述は以下の通りです。

１）HTML

<div class = "kyoto">
    <div class="swiper-container js-swiper-kyoto">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-1.jpg" alt="Swiper01">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-2.jpg" alt="Swiper01">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-3.jpg" alt="Swiper01">
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>  
  </div>


２）CSS

.kyoto img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}


３）JS

var swiper = new Swiper('.js-swiper-kyoto', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop:true,
  autoplay: {
  delay: 6000,
  disableOnInteraction: true
},
pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});

ちなみに、左右の矢印を表示させたくない時はCSSに以下の記述を追加する

.swiper-button-prev::after {
  content: none ;
}
.swiper-button-next::after {
  content: none ;
}

フェイド、ズームしながら画像をスライド

ファーストビューなどでよくフェイド、ズームしながらが画像がスライドするパターンを見かけるが
その処理の記述をする。

１）HTML
上記の通常パターンと同じ

２）CSS

.kyoto img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

@keyframes zoomUp {
  0% {
            transform: scale(1);
  }
  100% {
            transform: scale(1.15);
  }
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
          animation: zoomUp 10s linear 0s 1 normal both;
}


３）JS

var swiper = new Swiper('.js-swiper-kyoto', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop:true,
  effect: 'fade',
  autoplay: {
  delay: 4000,
  disableOnInteraction: false
},
speed:2000,
pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});


画面の両端が切れるスライド


上記のような画面の両端が切れるスライダーは以下の記述となる

１）HTML

<div class = "kyoto">
    <div class="swiper-container js-swiper-Kyoto">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-1.jpg" alt="Swiper01">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-2.jpg" alt="Swiper02">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-3.jpg" alt="Swiper03">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-1.jpg" alt="Swiper04">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-2.jpg" alt="Swiper05">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/fvbgi-3.jpg" alt="Swiper06">
          </div>
        </div>

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

　２）CSS

.slide-img{
  height: 300px;
  width: 100%;
}

　３）JS

var swiper = new Swiper('.js-swiper-Kyoto', {
  slidesPerView: 1.5,
  spaceBetween: 26,
  centeredSlides: true,
  breakpoints: {
    768: {
      slidesPerView: 2.5,
      spaceBetween: 26,
    },
    980: {
      slidesPerView: 3.5,
      spaceBetween: 26,
    }
  },

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});

パラメータの説明
このJSはレスポンシブ対応しており画面幅が768px未満の時は、
画面に表示される画像の数が1.5枚（slidesPerView: 1.5で指定）
画像の間の余白が26px（spaceBetween：26で指定）

768px以上の時は画像の数が2.5枚（slidesPerView: 2.5で指定）
画像の間の余白は上記と同じく26px（spaceBetween：26で指定）

980px以上の時は画像の数が3.5枚（slidesPerView: 3.5で指定）
画像の間の余白は上記と同じく26px（spaceBetween：26で指定）

同じページにスライドが二つある


上記のように同じページに２行のスライドがある場合、以下の記述となる。ここでは1つ目は上記の両端が切れるスライドと同じなので、2つ目を追加することになる

１）HTML

<div class = "Tokyo">
    <div class="swiper-container js-swiper-Tokyo">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide-tokyo-img">
              <img src="images/tokyo1.jpg" alt="Swiper01">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-tokyo-img">
              <img src="images/tokyo2.JPG" alt="Swiper02">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-tokyo-img">
              <img src="images/tokyo3.JPG" alt="Swiper03">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-tokyo-img">
              <img src="images/tokyo1.JPG" alt="Swiper04">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-tokyo-img">
              <img src="images/tokyo2.JPG" alt="Swiper05">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-tokyo-img">
              <img src="images/tokyo3.jpg" alt="Swiper06">
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>  
  </div>


ここで着目することは、１つ目のswiper-container横のクラス定義がjs-swiper-Kyoto、2つ目のswiper-container横のクラス定義がjs-swiper-Tokyo　この違いで別のスライドと認識する

２）CSS

.slide-tokyo-img{
  height: 360px;
  width: 100%;
}

上記のCSSを追加

３）JS

//  ２行目のスライダー // 
var swiper = new Swiper('.js-swiper-Tokyo', {
  slidesPerView: 3,
  spaceBetween: 0,
 
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop:true,
  autoplay: {
  delay: 4000,
  disableOnInteraction: false
},
speed:3000,
pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});


JSのファイルに上記の記述を追加

HTML/CSS
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

matsu2024のアバター matsu2024

関連記事

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次