【jQuery】プラグインを使わないスライド②

※ 当サイトではアフィリエイト広告を利用しています。

こんにちは、meiです。
前回に続いてプラグインを使わないスライドですが、「特定のスライドだけ表示時間を変えたい」、「特定のスライドだけフェードインさせたい」というオプションが付いた場合について、スライド①をベースにして書いていこうと思います。
これ実案件で来た要望なんですけど、当初はcssでアニメーション完結させれば出来るんじゃない？とか思ってたのですが、うまくいかなくて…。調べに調べてやっとたどり着きました…というのが本当のところです。
HTMLとcssについてはスライド①と同じものを使用します。
サンプルはこちらをご覧ください。(全5枚中3枚目から4枚目だけがフェードイン、5枚目の表示時間のみ1秒に設定しています。）

特定のスライドだけ表示時間を変える

jsはコチラ▼

$('.js-slide').each(function(){
    var $slides = $(this).find('.image'),
    slideCount = $slides.length,
    currentIndex = 0;
    lastIndex = slideCount - 1;

    let interval = 3000;
    let run = setInterval(changeImage , interval); 
      
    function changeImage(){
      let nextIndex = (currentIndex + 1) % slideCount;			

      $slides.eq(currentIndex).removeClass('is-active');
      $slides.eq(nextIndex).addClass('is-active');
      currentIndex = nextIndex;

      clearInterval(run); // stop the setInterval() 

      if(currentIndex === lastIndex){
        interval = 1000;
      } else {
        interval = 3000;
      }

      run = setInterval(changeImage, interval); // start the setInterval()
    }
});

setIntervalのintervalを変数にします。
最後のスライドだけ1000（1秒)、他は3000(3秒)かけて次のスライドに移るようにしています。
何パターンかある場合は、if文よりもswitch文で書いた方がいいかもしれませんね。

特定のスライドだけフェードインで表示する

jsはコチラ▼

$('.js-slide').each(function(){
  var $slides = $(this).find('.image'),
  slideCount = $slides.length,
  currentIndex = 0;
  lastIndex = slideCount - 1;

  setInterval(changeImage, 2000); 

  function changeImage(){
    let nextIndex = (currentIndex + 1) % slideCount;

    if(currentIndex === 2){
      $slides.eq(currentIndex).css('transition','opacity 1s ease-in-out');
      $slides.eq(nextIndex).css('transition','opacity 1s ease-in-out');
    } else {
      $slides.eq(currentIndex).css('transition','opacity 0s ease-in-out');
      $slides.eq(nextIndex).css('transition','opacity 0s ease-in-out');
    }

    $slides.eq(currentIndex).removeClass('is-active');
    $slides.eq(nextIndex).addClass('is-active');
    currentIndex = nextIndex;

  }
});

例として3枚目から4枚目に移るときにフェードインするようにしています。
その部分だけcss変更をjsで加える感じですね。

時間もフェードインも両方指定した場合

jsはコチラ▼

$('.js-slide').each(function(){
    var $slides = $(this).find('.image'),
    slideCount = $slides.length,
    currentIndex = 0;
    lastIndex = slideCount - 1;

    let interval = 3000;
    let run = setInterval(changeImage , interval); 
      
    function changeImage(){
      let nextIndex = (currentIndex + 1) % slideCount;	  
	  
    switch (currentIndex){
      case 2:
      $slides.eq(currentIndex).css('transition','opacity 1s ease-in-out');
      $slides.eq(nextIndex).css('transition','opacity 1s ease-in-out');
      break;
      default:
      $slides.eq(currentIndex).css('transition','opacity 0s ease-in-out');
      $slides.eq(nextIndex).css('transition','opacity 0s ease-in-out');
      break;
    }

      $slides.eq(currentIndex).removeClass('is-active');
      $slides.eq(nextIndex).addClass('is-active');
      currentIndex = nextIndex;

      clearInterval(run); // stop the setInterval() 
      
    switch (currentIndex){
      case 0:
      interval = 3000;
      break;
      case lastIndex:
      interval = 1000;
      break;                
      default:
      interval = 3000
      break;
      }

      run = setInterval(changeImage, interval); // start the setInterval()
    }
});

switch文で書いてみました。

まとめ

コードをいろいろさわっていくのは楽しいものです♪…が、なかなか要望通りにならなかったりするのが私の常です…
もっと思いのままに書けたらなぁ…（遠い目）