Q&A
javaが関係ないのであれば、質問タグを削除しておいた方がいいかと思います。
前提・実現したいこと
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.cssjquery.sliderPro.min.jsを入れています。
javaが原因なのかCSSが原因なのか判断できない為、思い当たる節としてタグをいれています。
（関連事項として入れることに問題は無いと思いますので）
Java と JavaScript を混同されていませんか？
用語が似ているので混在してしまいました。JavaScriptタグがあったのを確認できたので修正しました。ご指摘ありがとうございます。（お返事など不要で大丈夫です）
①のコードを試してみましたが、当方の環境では空白は生まれませんでした。
回答1件
0
こんにちは。
当方の環境では、①のやり方で、スクリプトを以下のようにしてみたところ、空白ができずに除去することができました。
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 });
投稿2020/12/23 07:02
総合スコア36156
ご教授ありがとうございます。
回答いただいた方法で試しましが、空白の解決はできませんでした。
従来の方法で対応します。ありがとうございました。
あなたの回答
tips
プレビュー
