JAVA / jQuery

【スライダー】画像をスライドさせる「Splide」【js】

 

「Splide」はjQueryを使用せず軽い

まず、CDN。<head></head>の間に。

<!-- splide.js ... cdn -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>

<!-- splide.css ... cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css">

 

次に、</footer>の直前に。

<script>
const options = {
  cover: true,
  heightRatio: 0.5,
  perMove: 1,
  gap: 16,
  updateOnMove: true,
  autoplay: true,
  interval: 5000, 
  padding: "5rem", //左右のスライドを5rem分表示
  type: "loop", //スライドをループ
  focus: "center", //アクティブなスライドを中央に表示
  rewind: false,	
};

const splide = new Splide(".splide", options);
splide.mount();
</script>

 

HTML。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="https://sumple"　alt="">
      </li>
      <li class="splide__slide">
        <img src="https://sumple"　alt="">
      </li>
      <li class="splide__slide">
        <img src="https://sumple"　alt="">
      </li>
    </ul>
  </div>
</div>
RELATED POST