Q&A実現したいこと
レスポンシブでjQueryのSlickスライダーでサムネイル付スライダーを作成しています。
そこで、以下の設定を組み込みたいと思いスライダーを改良中です。
＜組込みたい設定＞
1.各スライド要素に表示期間を設定し、その期間のみ要素を表示させたい。
2.サムネイルのスライド要素の表示が指定した数より少ない場合、スライドさせず固定して表示したいと考えています。
発生している問題・エラーメッセージ
色々なサイトを見て、表示期間を指定するコードとサムネイルの数が少ない場合のスライド表示を切り替える方法がわかったため、組み合わせて入れてみました。
【PC表示の場合】
PC表示ではちゃんと期間指定したスライドのみ表示されますが、サムネイルの個数が少ない場合は上のスライドで表示されている画像に枠線が表示されるのに、コピーされているスライドには枠線が表示されない
【スマホ表示の場合】
・期間指定して現在表示されるスライドの数は合っていますが、上下で表示されるスライドの順番が異なります。
・スマホ表示にするとサムネイルのスライドが1つコピーされて数が少なくなると、サムネイル部分が固定となるはずなのに、左右の矢印が表示されてしまいます。。
【現在のスマホ表示】
■□
＜□■＞
現在入れているコードは以下の様にしています。
HTML
1<!-- slider --> 2<div class="slider"> 3<!-- ～から表示する場合（終了期間が無い場合） --> 4 <div class="view_timer" data-start-date="2019/10/10 0:00"><a href="#"><img 5 src="http://placehold.jp/cc0000/ffffff/750x300.png" width="100%" alt=""></a></div> 6<!-- ～まで表示する（終了期間だけ決まっている場合） --> 7 <div class="view_timer" data-end-date="2019/10/16 0:00"><a href="#"><img 8 src="http://placehold.jp/000000/ffffff/750x300.png" width="100%" alt=""></a></div> 9<!-- ～から～まで表示する（掲載開始と終了が決まっている場合） --> 10 <div class="view_timer" data-start-date="2019/10/10 0:00" data-end-date="2019/12/16 0:00"><a href="#"><img 11 12src="http://placehold.jp/cccccc/ffffff/750x300.png" width="100%" alt=""></a></div> 13 <div class="view_timer" data-start-date="2019/10/4 0:00" data-end-date="2019/10/14 0:00"><a href="#"><img 14 15src="http://placehold.jp/ccc000/ffffff/750x300.png" width="100%" alt=""></a></div> 16</div> 17<!-- サムネイル部分 --> 18<div class="thumb"> 19<!-- ～から表示する場合（終了期間が無い場合） --> 20 <div class="view_timer" data-start-date="2019/10/10 0:00"><img 21 22src="http://placehold.jp/cc0000/ffffff/750x300.png" width="100%" alt=""></div> 23<!-- ～まで表示する（終了期間だけ決まっている場合） --> 24 <div class="view_timer" data-end-date="2019/10/16 0:00"><img 25 26src="http://placehold.jp/000000/ffffff/750x300.png" width="100%" alt=""></div> 27<!-- ～から～まで表示する（掲載開始と終了が決まっている場合） --> 28 <div class="view_timer" data-start-date="2019/10/10 0:00" data-end-date="2019/12/16 0:00"><img 29 30src="http://placehold.jp/cccccc/ffffff/750x300.png" width="100%" alt=""></div> 31 <div class="view_timer" data-start-date="2019/10/4 0:00" data-end-date="2019/10/14 0:00"><img 32 33src="http://placehold.jp/ccc000/ffffff/750x300.png" width="100%" alt=""></div> 34</div>
CSS
1/**----- トップ部分のスライダー -----**/ 2ul.slider{margin:0; padding:0; width:100%;} 3/**----- サムネイル部分のスライダー -----**/ 4ul.thumb{margin:5px auto 40px; padding:0; width:85%;} 5ul.thumb li.slick-slide{margin-right:2px;} 6ul.thumb li.slick-slide:hover{cursor:pointer;} 7/**----- サムネイル部分（左右の矢印） -----**/ 8ul.thumb .slick-prev{left:-31px!important; width:30px; height:30px; } 9ul.thumb .slick-next{right:-30px!important; width:30px; height:30px; } 10/**----- サムネイル部分（スライダーの数が少ない場合の処理） -----**/ 11ul.thumbFew .slick-current img{border: 2px solid #000000!important; width:100%; box-sizing:border-box;} 12ul.thumb .none{display:none!important;}
該当のソースコード
jQuery
1<script type="text/javascript"> 2var $j = jQuery.noConflict(); 3// ↓スライダーの掲載期間を処理 4 $j('.view_timer').each(function(index, target) { 5 var startDate = $j(this).attr("data-start-date"); 6 var endDate = $j(this).attr("data-end-date"); 7 var nowDate = new Date(); 8 if (startDate) { 9 startDate = new Date(startDate); 10 } else { 11 startDate = nowDate; 12 } 13 if (endDate) { 14 endDate = new Date(endDate); 15 } 16 if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { 17 $j(this).show(); 18 } else { 19 $j(this).hide(); 20 } 21 }); 22 23// ↓スライダー数が少ない場合の処理 24var $jslider = $j('.slider'); 25var slideCount = $jslider.children('div').length; 26 $j('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 27 if ($j(slideCount).length < 3) { 28 $j('.thumb').slick('slickSetOption', 'centerMode', false, true); 29 $j('.thumb').addClass('thumbFew'); 30 } 31 }); 32// ↓スライダーの処理 33$j(function() { 34// スライダーバナー部分 35 $j('.slider').slick({ 36 asNavFor:'.thumb', 37 arrows:false, 38 autoplay:true, 39 }); 40// サムネイル部分 41 $j('.thumb').slick({ 42 asNavFor:'.slider', 43 focusOnSelect: true, 44 slidesToShow:4, 45 slidesToScroll:1, 46 arrows:true, 47 responsive: [ 48 { 49 breakpoint: 768, // 768px以下のサイズに適用 50 settings: { 51 slidesToShow:2 52 } 53 } 54 ] 55 }); 56}); 57</script>
お手上げ状態なので、ご助言いただけたら幸いです。
よろしくお願いいたします。
回答1件
0
自己解決
その後こちらのサイトを含め、色々なサイトを見て以下のようなコード順に記入すると、実現できました！
スマートな記述ではないと思いますが、ひとまず実現できたため解決と致します。
ご閲覧いただいた方、もしご検討中の方がおりましたら、ありがとうございました。
jQuery
1var $j = jQuery.noConflict(); 2 3// ↓スライダーの掲載期間を処理 4 $j('.view_timer').each(function(index, target) { 5 var startDate = $j(this).attr("data-start-date"); 6 var endDate = $j(this).attr("data-end-date"); 7 var nowDate = new Date(); 8 if (startDate) { 9 startDate = new Date(startDate); 10 } else { 11 startDate = nowDate; 12 } 13 if (endDate) { 14 endDate = new Date(endDate); 15 } 16 if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { 17 $j(this).show(); 18 } else { 19 $j(this).remove(); 20 } 21 }); 22 23// ↓スライダーの処理 24$j(function() { 25// スライダーバナー部分 26 $j('.slider').slick({ 27 asNavFor:'.thumb', // pagerのクラス名を指定 28 arrows:false, 29 autoplay:true, 30 }); 31// サムネイル部分 32 $j('.thumb').slick({ 33 asNavFor:'.slider', // sliderのクラス名を指定 34 focusOnSelect: true, 35 slidesToShow:2, // 通常のpagerの個数 36 slidesToScroll:1, 37 arrows:true, 38 responsive: [ 39 { 40 breakpoint: 768, // 768px以下のサイズに適用 41 settings: { 42 slidesToShow:2 43 } 44 } 45 ] 46 }); 47 48// サムネイルの個数による表示切替 49 $j('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 50 if ($j('.thumb .view_timer').length <= 2) { // 2個以下の表示なら 51 $j('.thumb').addClass('thumbFew'); 52 $j('.thumb').slick('slickSetOption', 'centerMode', true, true); 53 } 54 }); 55});
変更した部分
・コードの記述順を1：期間指定、2：サムネイル個数で表示切替、3：slickスライダー → 1、3、2 へ変更。
・期間指定コードの最終行にある、「$j(this).hide();」で要素を隠していた処理を「$j(this).remove();」へ変更し、期間が終了すると要素を削除するようにしました。
・サムネイルのスライダーのdiv数で取得していた部分を「.view_timer」のクラス名で数を取得することへ変更。
投稿2019/10/11 03:10
総合スコア4
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。