Swiper.jsにタイマー機能をつける場合

JavaScript

posted: 2023/07/03
update: 2024/02/29

MVなどのスライダー機能において、恐らく普通はCMSで管理していることが多いせいかタイマーで動的に特定のスライドのみを特定の期間で非表示にするといった機能が調べても出てこなかったので、下記のjsで対応しました。

非表示にしたいslideクラスにview_timerを追加して下記のjsを追加。

$(document).ready(function(){
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    }
    else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    }
    else {
      $(this).remove(); //hide()やtoggle()だと要素自体が残ってしまうのでremove()
    }
  });
});

view_timerのコードを調べると大抵hide()やtoggle()で要素を非表示にしているものが多いのですが、ループありのスライダー機能で特定のスライドのみ非表示にするとループでクローンが生成されてしまいバグるので、remove()にして要素自体を削除すれば問題なく動的に非表示にできました。

▼ SNSでこの記事をシェア

Blog..

Swiper.jsにタイマー機能をつける場合