Slider Proで特定の画像のみを期間表示させたい

前提・実現したいこと

Slider Proで画像表示をしており、
特定の画像だけ期間表示をしたいと思っていすが、表示が上手くいかず悩んでいます。

該当のソースコード

■Slider Pro

$(document).ready(function($) {
 $( '#slider1,#slider2' ).sliderPro({
  width: '100%',
  height: '350',
  arrows: false,
  buttons: true,
  visibleSize: 'auto',
  autoSlideSize: true,
  forceSize: 'fullWidth',
  autoplayDelay: 7500,
  slideDistance: 10,
  breakpoints: {
   800: {
   width: '800',
   height: '500',
   arrows: false,
   buttons: true,
   forceSize: 'fullWidth',
   autoSlideSize: true,
   slideDistance:0,
   }
  }
 });
});


■期間表示

$(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).hide();
  }
 });
});


■HTML

<div id="slider1" class="slider-pro">
 <ul class="sp-slides">
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy01.jpg" alt="デモ"></li>
  ↑一例として上記を期間表示させたいです。

  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
 </ul><!--/ sp-slides-->
</div><!--/ full-->

試したこと

①liタグにview_timerを入れ込み

<li class="view_timer sp-slide" data-start-date="2020/4/9 20:00" data-end-date="2020/4/16 1:59"><img class="sp-image" src="../img/slide/dummy01.jpg" alt="デモ"></li>

①で試したところ、画像自体は期間中のみ表示、それ以外は非表示になったものの、
期間設定した箇所に合わせて下の画像の通り、空白ができてしまいました。

②liタグ→sp-slide、divタグ→view_timerと分離する

<li class="view_timer" data-start-date="2020/4/1 0:00" data-end-date="2020/4/10 23:59"><div class="sp-slide"><img class="sp-image" src="../img/slide/dummy01.jpg" alt="デモ"></div></li>

②で試したところ、view_timerが効かずに期間外の画像がでてしまいました。
divタグをpタグ、spanタグなどで代用しても同様の結果になりました。

③view_timerをclassからidに変換

<li id="view_timer" data-start-date="2020/4/1 0:00" data-end-date="2020/4/10 23:59" class="sp-slide"><img class="sp-image" src="../img/slide/dummy01.jpg" alt="デモ"></li>

③にて、view_timerのjsをid設定にして試したところ、①と同じ現象になりました。

現状

期間表示している箇所のみ表示かつ空白がでないようにしたいのですが、上記3つの方法でやっても解決されず、
下記のような少々不恰好な形で対応しています。

<div class="view_timer" data-start-date="2020/4/1 0:00" data-end-date="2020/4/10 23:59">
<div id="slider1" class="slider-pro">
 <ul class="sp-slides">
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy01.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
 </ul><!--/ sp-slides-->
</div><!--/ full-->
</div>

<div class="view_timer" data-start-date="2020/4/11 0:00">
<div id="slider2" class="slider-pro">
 <ul class="sp-slides">
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy01.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
  <li class="sp-slide"><img class="sp-image" src="../img/slide/dummy02.jpg" alt="デモ"></li>
 </ul><!--/ sp-slides-->
</div><!--/ full-->
</div>

Slider Proは便利なので今後も使いたいと考えているのですが、こちら解決方法がございましたらご教授いただきたいです。
よろしくお願いいたします。

補足情報

作業環境はDreamWeaver CC 2020で作成しています。
CSSでview_timerをdisplay:none;で記述しています。
仕様上$(document).ready(function($)で実装させています。
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.jsで動かしています。
Slider Proは規定通り、slider-pro.min.css　jquery.sliderPro.min.jsを入れています。

Lhankor_Mhy

2020/12/22 06:11

javaが関係ないのであれば、質問タグを削除しておいた方がいいかと思います。

omusubikorokoro

2020/12/22 06:22 編集

javaが原因なのかCSSが原因なのか判断できない為、思い当たる節としてタグをいれています。（関連事項として入れることに問題は無いと思いますので）

Lhankor_Mhy

2020/12/22 06:26

Java と JavaScript を混同されていませんか？

omusubikorokoro

2020/12/22 08:12 編集

用語が似ているので混在してしまいました。JavaScriptタグがあったのを確認できたので修正しました。ご指摘ありがとうございます。（お返事など不要で大丈夫です）

Lhankor_Mhy

2020/12/23 06:53

①のコードを試してみましたが、当方の環境では空白は生まれませんでした。

行動規範の内容に同意します

回答1件

こんにちは。

当方の環境では、①のやり方で、スクリプトを以下のようにしてみたところ、空白ができずに除去することができました。

js
1	$(document).ready(function ($) {
2		$(".view_timer").each(function (index, target) {
3			var startDate = $(this).attr("data-start-date");
4			var endDate = $(this).attr("data-end-date");
5			var nowDate = new Date();
6			if (startDate) {
7				startDate = new Date(startDate);
8			} else {
9				startDate = nowDate;
10			}
11			if (endDate) {
12				endDate = new Date(endDate);
13			}
14			if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
15				$(this).show();
16			} else {
17				$(this).remove(); // 変更
18			}
19		});
20
21		$('#slider1,#slider2').sliderPro({
22			width: '100%',
23			height: '350',
24			arrows: false,
25			buttons: true,
26			visibleSize: 'auto',
27			autoSlideSize: true,
28			forceSize: 'fullWidth',
29			autoplayDelay: 7500,
30			slideDistance: 10,
31			breakpoints: {
32				800: {
33					width: '800',
34					height: '500',
35					arrows: false,
36					buttons: true,
37					forceSize: 'fullWidth',
38					autoSlideSize: true,
39					slideDistance: 0,
40				}
41			}
42		});
43	});