Swiperで特定のスライドだけ表示時間を長くする

Swiperで1枚目だけ長く表示したい

※2023年11月追記

どこかのバージョンで「data-swiper-autoplay」という属性に対応し、スライドにこの属性を加えるだけで良くなったようです!

<!-- 2秒止める場合 -->
<div class="swiper-slide" data-swiper-autoplay="2000">

対応してないバージョンの方は以前の内容の下記内容を役立ててね。

 

という事が必要になりそうでならなかったので供養します。


  // Swiper起動
  const mainSlider = new Swiper('#mainSlider', {
    effect: "fade",
    fadeEffect: {
      crossFade: true
    },
    loop: true,
    autoplay: {
      delay: 2000
    },
    speed: 1000,
  })

  
  // 以下が特定のスライドのみ表示時間を伸ばす処理
  let stopSlide;

  mainSlider.on('transitionEnd',function (){
    clearTimeout(stopSlide);
    mainSlider.autoplay.start();

    if ( mainSlider.realIndex === 0 ){//対象のスライドを指定(0から数える)
      mainSlider.autoplay.stop();
      console.log('stop');

      stopSlide = setTimeout(function (){
        mainSlider.autoplay.start();
        console.log('restart');
      },8000);// 伸ばしたい時間を指定(今回は8秒)
    }
  })

原理としてはスライダーが切り替わったとき、
対象のスライドであれば、自動スライドをオフにし、伸ばしたい時間経ったら自動で再開するということをしています。

それに加えて手動で切り替えたときは自動スライドを再開し、上記の自動再開処理を停止する、ということをやっています。

動画を埋め込むときなど活用できるかもしれませんね。

 

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。