スライド画像が3枚（スマホは2枚）の時はスライドさせず、固定させるJavaScriptの書き方

スライドの画像の枚数によってスライドさせるか、させないかを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});

に変更したけどうまく行かない。

m.ts10806

2019/04/22 03:52

現在のコードにおける問題は何でしょうか？また「スマホの時は」は現在のコードで正しく判断できていますか？

_T_S

2019/04/22 04:10

JavaScriptが初心者なので、うまく説明できませんがスライド画像が3枚もしくは2枚になった時にもスライドが動いてしまうことが問題です。 ul にあるsp-slidesのクラス名かli のsp-slideをPCが画像3枚、SPが2枚の時に別のクラスに切り替えて、真ん中に表示できるように$(window).on('load resize', function(){ //画面幅を取得 var w = $(window).width(); //画面幅によってスライダーにするliの数を設定 var num = $('li:nth-child()').length; if(w > 640){ //PC if(num > 3){ $('#banner_slider ul').removeClass('banner'); } }else{ //SP if(num > 2){ $('#banner_slider ul').removeClass('banner'); } } }); という感じで書いていますが、うまく行かない状態です。

m.ts10806

2019/04/22 04:18

その書いてみた部分も質問に追記いただけますか？コメント欄ではマークダウン使えませんし、「やってみたこと」なので質問本文にあったほうが良いです

_T_S

2019/04/22 04:26

今追記しました。

m.ts10806

2019/04/22 04:48

1つ気になったことがテストサイトとはいえ、全世界から閲覧される可能性がある場所にテストサイトURLとそのベーシック認証の情報を記載して良いのでしょうか。確かに「実際のサイトを見たほうが早い」かもしれませんが、様々なリスクとの天秤にかける必要はありそうです。「最小限の再現確認ができるコード」だけのほうがアドバイスする側としても助かる部分はありあります。

_T_S

2019/04/22 04:57

そうですね。一旦この質問は削除します。

m.ts10806

2019/04/22 04:58

いろいろ追記してもらったあとに大事なことを後だしですみません