jquereyで721px以上の場合と720px以下の場合のjsを読み込む設定を変えてたいのですがやり方が分からずうまくいきません。
js
1 2var windowWidth = $(window).width(); 3var windowSm = 720; 4if (windowWidth <= windowSm) { 5 $('.thumb-item').slick({ 6 asNavFor:'.thumb-item-nav', 7 arrows: false, 8 slidesToShow:1, 9 }); 10 $('.thumb-item-nav').slick({ 11 asNavFor:'.thumb-item', 12 focusOnSelect: true, 13 arrows: false, 14 slidesToShow:5, 15 }); 16} else { 17 $(function(){ 18 var slider = "#slider"; 19 var thumbnailItem = "#thumbnail-list .thumbnail-item"; 20 21 $(thumbnailItem).each(function(){ 22 var index = $(thumbnailItem).index(this); 23 $(this).attr("data-index",index); 24 }); 25 26 27 $(slider).on('init',function(slick){ 28 var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index"); 29 $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current"); 30 }); 31 32 $(slider).slick({ 33 autoplay: false, 34 arrows: false, 35 fade: true, 36 infinite: false 37 }); 38 $(thumbnailItem).on('click',function(){ 39 var index = $(this).attr("data-index"); 40 $(slider).slick("slickGoTo",index,false); 41 }); 42 43 $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){ 44 $(thumbnailItem).each(function(){ 45 $(this).removeClass("thumbnail-current"); 46 }); 47 $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current"); 48 }); 49}); 50 51$(function(){ 52var luminousTrigger = document.querySelectorAll('.luminous'); 53new LuminousGallery(luminousTrigger); 54}); 55 } 56 57}; 58} 59 60
720px以下の場合は(モバイル)
js
1$('.thumb-item').slick({ 2 asNavFor:'.thumb-item-nav', 3 arrows: false, 4 slidesToShow:1, 5 }); 6 $('.thumb-item-nav').slick({ 7 asNavFor:'.thumb-item', 8 focusOnSelect: true, 9 arrows: false, 10 slidesToShow:5, 11 });
の設定にして
721以上の場合は(pc)
js
1$(function(){ 2 var slider = "#slider"; 3 var thumbnailItem = "#thumbnail-list .thumbnail-item"; 4 5 $(thumbnailItem).each(function(){ 6 var index = $(thumbnailItem).index(this); 7 $(this).attr("data-index",index); 8 }); 9 10 11 $(slider).on('init',function(slick){ 12 var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index"); 13 $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current"); 14 }); 15 16 $(slider).slick({ 17 autoplay: false, 18 arrows: false, 19 fade: true, 20 infinite: false 21 }); 22 $(thumbnailItem).on('click',function(){ 23 var index = $(this).attr("data-index"); 24 $(slider).slick("slickGoTo",index,false); 25 }); 26 27 $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){ 28 $(thumbnailItem).each(function(){ 29 $(this).removeClass("thumbnail-current"); 30 }); 31 $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current"); 32 }); 33}); 34 35$(function(){ 36var luminousTrigger = document.querySelectorAll('.luminous'); 37new LuminousGallery(luminousTrigger); 38});
調べた結果一番上のような記述が出てきましたがうまくいきませんでした。
PCサイズの場合はスライダーのメイン画像をクリックすると拡大するような設定し、モバイルの場合はスライダーのみの設定にしたく考えております。
あなたの回答
tips
プレビュー