【Splide】横方向に自動で流れる無限ループスライダーの作成方法

JavascriptSplideスライダー

Splideで横方向に自動で流れる無限ループスライダー

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

See the Pen Untitled by Web Indep (@web-indep) on CodePen.

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

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

https://ja.splidejs.com/extensions/auto-scroll

jsファイルは「splide.min.js」と「splide-extension-auto-scroll.min.js」を使います。

「splide.min.css」もお忘れなく。

HTML

<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>

CSS

.splide__slide {
  width: 450px;
  height: 300px;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}

Javascript

const sliderElement = document.querySelector(".splide");
  if (sliderElement) {
    const options = {
      type: "loop",
      arrows: false,
      pagination: false,
      drag: false,
      perPage: 3,
      fixedWidth: 450,
      autoScroll: {
        speed: 0.5,
        pauseOnHover: false,
      },
    };
    const splide = new Splide(".splide", options);
    splide.mount(window.splide.Extensions);
  }

トップページに戻る