スライドの画像の枚数によってスライドさせるか、させないかをJavaScriptで切り替えられるようにしたい。
html
1<div id="banner_slider"</div>
を、PCの時にはスライドが3枚以下、スマホの時はスライドが2枚以下の時にスライドさせずに真ん中に固定されるようにしたい。
現在のJavaScript
JavaScript
1$(window).on('load resize', function(){ 2 //画面幅を取得 3 var w = $(window).width(); 4 //画面幅によってスライダーにするliの数を設定 5 var num = $('li.sp-slide').length; 6 if(w > 640){ 7 //PC 8 if(num > 3){ 9 $('ul.sp-slides').addClass('act'); 10 } 11 }else{ 12 //SP 13 if(num > 2){ 14 $('ul.sp-slides').addClass('act'); 15 } 16 } 17}); 18 19$(document).ready(function(){ 20 21 $('#banner_slider').sliderPro({ 22 width: 314, 23 height: 220, 24 visibleSize: '100%', 25 buttons: false, 26 arrows: false, 27 fadeArrows: false, 28 slideDistance: 30, 29 breakpoints: { 30 640: { 31 width: 170, 32 height: 110, 33 slideDistance: 20, 34 } 35 } 36 });
みたいな感じです。
よろしくお願いします。
ul にあるsp-slidesのクラス名かli のsp-slideをPCが画像3枚、SPが2枚の時に別のクラスに切り替えて、真ん中に表示できるように
JavaScript
1$(window).on('load resize', function(){ 2//画面幅を取得 3var w = $(window).width(); 4//画面幅によってスライダーにするliの数を設定 5var num = $('li:nth-child()').length; 6if(w > 640){ 7//PC 8if(num > 3){ 9$('#banner_slider ul').removeClass('banner'); 10} 11}else{ 12//SP 13if(num > 2){ 14$('#banner_slider ul').removeClass('banner'); 15} 16} 17});
に変更したけどうまく行かない。
あなたの回答
tips
プレビュー