PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   
PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   

Splide Sliderの使い方

タグ :

Splideの導入方法

CDNで簡単導入

  2. <!-- CSS -->
  3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css">
  5. <!-- JS -->
  6. <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>

HTML基本構造

  2. <div class="splide">
  3.   <div class="splide__track">
  4.     <ul class="splide__list">
  5.       <li class="splide__slide">Slide 1</li>
  6.       <li class="splide__slide">Slide 2</li>
  7.       <li class="splide__slide">Slide 3</li>
  8.     </ul>
  9.   </div>
  10. </div>

初期化（JS）

  2. <script>
  3. document.addEventListener('DOMContentLoaded', function () {
  4.   new Splide('.splide').mount();
  5. });
  6. </script>

基本的な設定（オプション）

  2. new Splide('.splide', {
  3.   type: 'loop', // ループ
  4.   perPage: 3, // 表示枚数
  5.   gap: '1rem', // 間隔
  6.   autoplay: true, // 自動再生
  7.   interval: 3000, // 再生間隔
  8.   pauseOnHover: true, // ホバーで停止
  9. }).mount();

よく使うオプション一覧

type —- slide / loop / fade

perPage — 表示枚数

perMove — 一度に動く枚数

gap — スライド間の余白

autoplay — 自動再生

speed — アニメーション速度

pagination — ドット表示

arrows — 矢印表示

rewind — 最後のスライドまで行ったら、最初に戻る

レスポンシブ対応

  2. new Splide('.splide', {
  3.   perPage: 3,
  4.   breakpoints: {
  5.     768: {
  6.       perPage: 2,
  7.     },
  8.     480: {
  9.       perPage: 1,
  10.     }
  11.   }
  12. }).mount();

カスタマイズ（CSS）

矢印デザイン変更

  2. .splide__arrow {
  3.   background: black;
  4.   color: white;
  5. }

スライドデザイン

  2. .splide__slide {
  3.   background: #eee;
  4.   padding: 40px;
  5.   text-align: center;
  6. }

ドット（pagination）

  2. .splide__pagination__page {
  3.   background: gray;
  4. }
  6. .splide__pagination__page.is-active {
  7.   background: black;
  8. }

応用テクニック

フェードスライダー

  2. new Splide('.splide', {
  3.   type: 'fade',
  4. }).mount();

センター表示（カルーセル）

  2. new Splide('.splide', {
  3.   type: 'loop',
  4.   focus: 'center',
  5.   perPage: 3,
  6. }).mount();

サムネイル付きスライダー

  2. const main = new Splide('#main');
  3. const thumbs = new Splide('#thumbs', {
  4.   fixedWidth: 100,
  5.   gap: 10,
  6.   isNavigation: true,
  7. });
  9. main.sync(thumbs);
  10. main.mount();
  11. thumbs.mount();

複数スライダー

  2. document.querySelectorAll('.splide').forEach(el => {
  3.   new Splide(el).mount();
  4. });

イベント

  2. const splide = new Splide('.splide');
  4. splide.on('moved', function (newIndex) {
  5.   console.log('現在のスライド:', newIndex);
  6. });
  8. splide.mount();

WordPressで使う場合

方法①：直接読み込み

  2. wp_enqueue_script('splide-js', 'https://cdn...', [], null, true);
  3. wp_enqueue_style('splide-css', 'https://cdn...');

方法②：テーマ内に組み込み

• assets/js/splide.js
• assets/css/splide.css

よくあるエラー

動かない — JS読み込み忘れ
レイアウト崩れ — HTML構造ミス
スライドずれる — CSS競合
自動再生しない — autoplay未設定

Splide × GSAP（GSAP連携）

GSAPを読み込み

  2. <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

スライド切り替え時にアニメーション

  2. const splide = new Splide('.splide', {
  3.   type: 'loop',
  4. });
  6. splide.on('mounted move', function () {
  7.   gsap.from('.splide__slide.is-active', {
  8.     opacity: 0,
  9.     y: 50,
  10.     duration: 0.8,
  11.     ease: 'power3.out'
  12.   });
  13. });
  15. splide.mount();

スライドが切り替わるたびにフェード＋下から出現

スライド内の要素を個別アニメーション

HTML

  2. <li class="splide__slide">
  3.   <h2 class="title">Title</h2>
  4.   <p class="text">Description</p>
  5. </li>

GSAP

  2. splide.on('active', function (slide) {
  3.   const el = slide.slide;
  5.   gsap.from(el.querySelector('.title'), {
  6.     opacity: 0,
  7.     y: 30,
  8.     duration: 0.6,
  9.   });
  11.   gsap.from(el.querySelector('.text'), {
  12.     opacity: 0,
  13.     y: 30,
  14.     duration: 0.6,
  15.     delay: 0.2,
  16.   });
  17. });

テキストを順番にふわっと出す

スライド切替「前」にアニメーション

  2. splide.on('move', (newIndex, oldIndex, destIndex) => {
  3.   const slides = splide.Components.Elements.slides;
  4.   const currentSlide = slides[oldIndex];
  6.   gsap.to(currentSlide, {
  7.     opacity: 0,
  8.     scale: 0.9,
  9.     duration: 0.5,
  10.   });
  11. });

タイムラインでリッチ演出

  2. splide.on('active', (slide) => {
  3.   const el = slide.slide;
  5.   const tl = gsap.timeline();
  7.   tl.from(el.querySelector('.title'), {
  8.     opacity: 0,
  9.     y: 50,
  10.     duration: 0.6
  11.   })
  12.   .from(el.querySelector('.text'), {
  13.     opacity: 0,
  14.     y: 50,
  15.     duration: 0.6
  16.   }, "-=0.3");
  17. });

パララックス風アニメーション

  2. splide.on('active', (slide) => {
  3.   const el = slide.slide;
  5.   const tl = gsap.timeline();
  7. splide.on('move', () => {
  8.   gsap.to('.splide__slide img', {
  9.     x: -50,
  10.     duration: 1,
  11.     ease: 'power2.out'
  12.   });
  13. });

前のアニメーションをリセット

  2. splide.on('inactive', (slide) => {
  3.   gsap.set(slide.slide.querySelectorAll('*'), {
  4.     clearProps: 'all'
  5.   });
  6. });

アニメーション初期化

サンプル

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

前ページに戻る
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA   
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA