jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法

2024年2月27日

javascript

※本ページはプロモーションを含みます

はじめに
今回作りたいカルーセルの仕様
どうやって実現するの？
- 実際のコード例
- 実際の表示
最後に

はじめに

カルーセル（スライダー）をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper.jsの利用サンプルです。

▼Swiper
https://swiperjs.com/

今回作りたいカルーセルの仕様

記事のリンクを想定しています。

上側は記事のサムネイル、下側は記事のテキスト情報を表示します。

さらにテキスト情報には以下の内容が入ります。

タイトル
抜粋
記事公開日

記事は１スライダーに１個だけ表示されスライドーしてほかの記事が見えるようにします。
ただし上側のサムネイルだけはほかの写真が見切れるようにします。

どうやって実現するの？

swiperでサムネイルのスライダーＡとテキスト情報のスライダーＢを別々につくり、その2つを連動するようにします。
スライダーＡは見切れるように設定し、スライダーＢは見切れないように設定すると作りたいカルーセルの完成です。

実際のコード例

<div class="sliderContainer">
  
  <div class="photoSlider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://picsum.photos/400/300.webp?random=1" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/400/300.webp?random=2" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/400/300.webp?random=3" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/400/300.webp?random=4" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/400/300.webp?random=5" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <!-- /.photoSlider -->

  <div class="textSlider">
    <div class="swiper-wrapper">
      <div class="swiper-slide post">
        <div class="post-title">記事１のタイトル</div>
        <div class="post-date">2025/12/01</div>
        <div class="post-body">記事抜粋文字列を想定</div>
      </div>
      <div class="swiper-slide post">
        <div class="post-title">記事２タイトル</div>
        <div class="post-date">2025/12/02</div>
        <div class="post-body">記事抜粋文字列を想定</div>
      </div>
      <div class="swiper-slide post">
        <div class="post-title">記事３タイトル</div>
        <div class="post-date">2025/12/03</div>
        <div class="post-body">記事抜粋文字列を想定</div>
      </div>
      <div class="swiper-slide post">
        <div class="post-title">記事４タイトル</div>
        <div class="post-date">2025/12/04</div>
        <div class="post-body">記事抜粋文字列を想定</div>
      </div>
      <div class="swiper-slide post">
        <div class="post-title">記事５タイトル</div>
        <div class="post-date">2025/12/04</div>
        <div class="post-body">記事抜粋文字列を想定</div>
      </div>
    </div>
  </div>
  <!-- /.textSlider -->

</div>

.sliderContainer {
  width: 600px;
  overflow-x: hidden;
  position: relative;
}

.textSlider {
  .post {
    padding: 10px;
    background-color: beige;
  }
  .post-title {
    font-weight: bold;
    font-size: larger;
  }
  .post-date {
    font-size: smaller;
    font-weight: bold;
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const photoSlide = new Swiper(".photo-slide", {
    // ★ここがポイント。少数を指定して見切れるように
    slidesPerView: 1.5,
    centeredSlides: true,
    spaceBetween: 30,
    // ページネーション
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  const textSlide = new Swiper(".photo-slide", {
    // ★ここがポイント。テキスト部分は見切れないように
    slidesPerView: 1,
    centeredSlides: true,
    loop: true
  });

  // ★ここがポイント。スライダー連動設定
  photoSlider.controller.control = [textSlide];
  textSlider.controller.control = [photoSlide];
});