スライダー（slick.js）の画像にタイマーをしかけたいです。

Question

いつもお世話になっております。
表題の件お伺いです。

●やりたいこと
headerの別ファイル内で指定されているslickの画像を時間指定で表示・非表示させたいです。
シンプルにバナーを時間指定で表示させるjqueryを先日教えていただいて記述させていただきました。
それを使ってスライダーの画像も時間指定で表示の切り替えができればと思っています。
（※他に方法があればそちらでも構いません。）

●構造
index.htmlにheaderと左ナビとfooterが別ファイルが読み込まれています。
headerの別ファイルの中でvue.js(?)を使ってslickに表示させる画像を指定してあります。


どこに何を記述すればスライドバナーの画像に時間指定表示が可能になるかご教示いただければと思います。

別途ヘッダーファイルheader-component.vueも添付させていただきます。
javascriptは拾ってきて使用する程度の知識です。
お手数おかけいたします。
よろしくお願いいたします。


スライダー部分
……………………………………………………………………………………………………………………
	

	

……………………………………………………………………………………………………………………


タイマー指定しているバナー
……………………………………………………………………………………………………………………
                        
……………………………………………………………………………………………………………………


script部分
……………………………………………………………………………………………………………………


module.exports = {
      data: function() {
    return {
      images: [],
      slider: null
    }
  },
  mounted: function() {
    var that = this;
    setTimeout(function() {
           //that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/07125042/2106marathon1.jpg',url:'https://www.rakuten.ne.jp/gold/nissen-rla/ecstation/page/0622_marathon.html'});          
           that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/21sumhatarakufuku.jpg',url:'https://www.rakuten.ne.jp/gold/nissen-rla/ecstation/page/work_ladies.html'});
	　that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/newblack.jpg',url:'https://search.rakuten.co.jp/search/mall/%E5%96%AA%E6%9C%8D%E3%80%80%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%AB/?sid=354505'});
　　　　　that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/21ss_setup.jpg',url:'https://search.rakuten.co.jp/search/mall/%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97+%E5%8D%98%E5%93%81+%E4%B8%8A%E4%B8%8B%E5%88%A5%E5%A3%B2/?s=4&sid=354505'});
　　　　　that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/homeraretops.jpg',url:'https://search.rakuten.co.jp/search/mall/%E3%83%AC%E3%83%87%E3%82%A3%E3%83%BC%E3%82%B9+%E3%83%88%E3%83%83%E3%83%97%E3%82%B9/?nitem=%E3%82%B8%E3%83%A3%E3%82%B1%E3%83%83%E3%83%88%20%E4%BA%8B%E5%8B%99%E6%9C%8D&s=4&sf=1&sid=354505'});
　　　　　//that.images.push({imgsrc:'https://www.rakuten.ne.jp/gold/nissen-rla/img2020/bn620/620_suit.jpg',url:'https://item.rakuten.co.jp/nissen-rla/c/0000000153/'});
	  that.images.push({imgsrc:'https://www.rakuten.ne.jp/gold/nissen-rla/img2020/bn620/620_vestsuit.jpg',url:'https://item.rakuten.co.jp/nissen-rla/c/0000000301/'});
	  that.images.push({imgsrc:'https://www.rakuten.ne.jp/gold/nissen-rla/img2020/bn620/620_party.jpg',url:'https://item.rakuten.co.jp/nissen-rla/c/0000000303/'});
	  that.images.push({imgsrc:'https://www.rakuten.ne.jp/gold/nissen-rla/img2020/bn620/620_small.jpg',url:'https://search.rakuten.co.jp/search/mall/%E5%B0%8F%E3%81%95%E3%81%84%E3%82%B5%E3%82%A4%E3%82%BA/?sid=354505'});
　　　　//that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/slb_shirt_haru.jpg',url:'https://item.rakuten.co.jp/nissen-rla/c/0000000170/'});



    }, 300);
        (function ($) {
  "use strict";

  //時間の取得
  let now = new Date();

  let limitedBnrFx = function(){
    let $target = $('body *[class^="limit--"]');

    $($target).each(function () {
      let $this = $(this);
      let $className = $this[0].className.split(' ')[0];
      let $classNameSplit = $className.split('--');

      //開始日時の取得
      let $st = $classNameSplit[1].split('_');
      let $stYmd = $st[0];
      let $stTime = $st[1].replace(/-/g, ':');
      let $stDate = $stYmd.replace(/-/g, '/') + ' ' + $stTime + ':00';
      let startDay = new Date($stDate);

      //終了日時の取得
      let $end = $classNameSplit[2].split('_');
      let $endYmd = $end[0];
      let $endTime = $end[1].replace(/-/g, ':');
      let $endDate = $endYmd.replace(/-/g, '/') + ' ' + $endTime + ':00';
      let endDay = new Date($endDate);

      //表示・非表示の設定(設定期間内は表示[show]・それ以外の期間は非表示[hide])
      if ( startDay < now && now < endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });

  };

    limitedBnrFx();

})(jQuery);
  },
 updated: function() {
    $('#top-half-slider').slick({
		autoplay: true,
		autoplaySpeed: 3000,
		infinite: true,
		dots: true,
		arrows: false
		// slidesToShow: 1,
		// slidesToScroll: 1
        });
      }
	}

……………………………………………………………………………………………………………………

Answer

ECマスターズの田中です。

恐縮ですが、当フォーラムは投稿時に画像ファイルのみ添付できる仕様となっておりますので、
現在の楽天市場のソースを確認しながらご案内いたします。

メインスライダーはvue.jsにより制御されておりますので、
「タイマー指定しているバナー」とは異なる方法が必要となります。

最初に、すべてのメインスライダー用画像に対して、imgsrc・urlに加え、
start・endという属性で、表示開始/終了日時をご記載ください。
日付の書式は「年４桁/月２桁/日２桁 時２桁:分４桁:秒４桁」
の形式でご記載ください（すべて半角英数記号です。日と時の間の半角スペースもご記載ください）。
無期限の場合も指定が必要です。現時刻から10年後など、何らかの日時をご記載願います。

たとえば、下記のような書式になります。
that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/21sumhatarakufuku.jpg',url:'https://www.rakuten.ne.jp/gold/nissen-rla/ecstation/page/work_ladies.html',start:'2021/06/30 19:00:00',end:'2021/07/01 13:00:00'});

各画像への追記が完了しましたら、

に対して

のように、v-if属性を追加していただくことで、
表示期間を指定して表示できるようになります。