右側だけ画面端まで広げるスライダー

こんな感じのスライドを実装できます

See the Pen 右側だけ画面端まで広げるスライダー by Web Indep (@web-indep) on CodePen.

このレイアウト、スライドの作り方に苦戦していたので、自分の記録用としても残しておきます。

割とよく見るレイアウトなので、よく使えるんじゃないかと思います！

SplideのCDNは下記からダウンロード

スライド自体はswiperなど他のものでも問題ないかと思いますが、ここではSplideで実装しています。

https://ja.splidejs.com/guides/getting-started

jsファイルは「splide.min.js」を使います。「splide.min.css」もお忘れなく。

HTML

<div class="l-section"> 
  <div class="l-section-wrapper"> 
    <div class="l-section-inner"> 
      <div class="splide">
        <div class="splide__track">
          <ul class="splide__list">
            <li class="splide__slide"><img src="https://images.unsplash.com/photo-1736344319749-93bc29f03d5d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDUwNTMyNjR8&ixlib=rb-4.0.3&q=85" alt=""></li>
            <li class="splide__slide"><img src="https://images.unsplash.com/photo-1741812191037-96bb5f12010a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDUwNTMyNjR8&ixlib=rb-4.0.3&q=85" alt=""></li>
            <li class="splide__slide"><img src="https://images.unsplash.com/photo-1744473671695-d00cfb151579?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDUwNTMyNjR8&ixlib=rb-4.0.3&q=85" alt=""></li>
            <li class="splide__slide"><img src="https://images.unsplash.com/photo-1744893295511-6a3edbd6e866?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDUwNTMyNjR8&ixlib=rb-4.0.3&q=85" alt=""></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.l-section {
  overflow-x: clip;
}

.l-section-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.l-section-inner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
}

.splide img {
  max-width: 100%;
  height: auto;
}

Javascript

const splide = new Splide('.splide', {
        type: 'loop',
        perMove: 1,
        fixedWidth: '300px',
        gap: '40px',
        pauseOnHover: false,
        arrows: false,
        pagination: true,
        autoplay: true,
        interval: 3000,
    });
    
    splide.mount();
トップページに戻る