スライドサイズを設定しよう！

どうもRyokutyaです。
今回は自動で動くスライドの画像サイズについて解説していきます。

今回やること

前回までに作成した「自動で動くスライド」は画像サイズを変更するには、対応するjavascript部分を全て修正しないといけませんでした。
毎回変更するのはすごく手間がかかりますので、あらかじめいくつかサイズを用意しておき、htmlを操作するだけで簡単に画像サイズを変更できるようにしましょう！

コードの紹介

html

 <!-- スライドの設定 start-->
          
<div class="slide_setting">

      <!--slide_sizeのclass名に L or M を入れると画像のサイズが変わります-->
      <div id="slide_size" class="L"></div>

      <!--slide_stoperのclass名にstopを入れるとindexボタンを押した時オートスライドが停止する-->
      <div id="slide_stoper" class="stop"></div>
            
</div><!--slide_setting end-->
<!--スライドの設定 end-->

css

//=================================================//
//スライドの調整
//=================================================//
//スライド画像の大きさ
.slide{
    width:1200px//好きなサイズに変更してください。
//htmlのslide_sizeのクラスにLまたはMを指定している場合はそちらが優先されます。
}

//スライドの中心調整
.slides_case{
   margin:0 auto;
   width:1200px;
}

JavaScript(JavaScript+jQuery)

 
    //=================================================//
    //スライドの画像サイズ 変更
    //=================================================//
    var slideSize;
    var slides_containerClass=$('#slide_size').attr('class');

    switch( slides_containerClass ){
        case 'L':
            $('.slide').css('width','1200px');
            $('.slides_case').css('width','1200px');
            slideSize=1200;
            break;

        case 'M':
            $('.slide').css('width','800px');
            $('.slides_case').css('width','800px');
            slideSize=800;
            break;
    }

コードの説明

html

html部分の1行目（slide_settingの部分)はスライドの設定を変更する際にクラス名を書き換えるdivをまとめておくために作っただけなのでなくてもokです。
2行目（id＝”slide_size”の部分）がclassを変更することで画像サイズを変更できる部分です。
※どの要素でもid=”slide_size”にすればクラス名を変更すれば画像サイズを変更できますが、htmlが長くなった時どこを変更すればいいかわかりにくくなると思うので1か所にまとめています。
3行目は前回のオプション部分です。
クラス名にstopを入れるとインデックスボタンを押した時スライドが動かなくなります。

JavaScript（JavaScript+jQuery）

1行目でグローバル変数としてslideSizeを定義しています。
グローバル変数として定義することで、スコープ内で書き換えがあった場合も、変数の値が上書きされます。
2行目はhtmlでslide_sizeのidを持つ要素のクラス名を習得しています。
対象要素.attr(‘class’)とすることで、指定した要素のクラス名を取得することができます。

switch文

3行名はswitch文です。
※switch文で記述できることは、全てif文で記述することができますが、switch文の方がコードが読みやすくなるのでswitch文を使用しています。

switch(条件）{
    case 〇〇:
        値が〇〇の時の処理
        break;
    case △△：
        値が△△の時の処理
        break;
    default:
        値どれにも該当しない時の処理
}

switch文は条件部分の値と指定したcaseの値が一緒だった場合に該当caseの処理が実行されます。
各caseの処理の最後にbreak;を忘れないように注意してください。
switch文がわからない人は「条件分岐｜1から始めるJavaScript#6」を読んでみてください。

switch文の一行目は先ほど定義した変数（slides_containerClass）です。
この変数にはhtmlでidにslide_sizeを指定した要素のクラス名が格納されています。
※例えば、クラス名をLにしているとswitch文の条件の部分は’L’になります。
2行目以降はあらかじめ用意したい画像サイズを指定しています。
case ‘L’:の場合
htmlでクラス名にLを指定した場合の処理を記述しています。
この時、caseの値でLを指定する時、クォーテーションで囲むのを忘れないようにしてくだい。
caseの後ろの値の部分には数字や文字列を指定できるため、クォーテーションで囲って文字列であると明示するようにしてください。
case ‘L’内の1行目は.slide（画像が入っている各<li>）の大きさを1200pxに変更する処理です。
2行目は.slide_case（<li>の親要素<ul>を内包する<div>）の大きさを1200pxに変更する処理です。
.slide_caseの大きさを.slideと同じにすることで、margin:0 auto;を効かせてスライドを画面の中心に来るようにしています。
3行目はslideSize（変数）にスライドの大きさの値を上書きしています。
case ‘M’:の場合
基本的に処理自体は同じですが、Mサイズということでスライドの大きさを800pxにしています。
これで概ね変更は完了です。

他の部分の変更

今まで、スライドを動かす量は、手打ちで1200pxと記述していました。
最後に、1200pxと手打ちしていた部分をslideSize（変数）に変更することで、完成です。
変更箇所は全部で3か所です。

var autoslider1=function(){

        if( loopCounter == slideLength-1){
            $('.index_btn').eq(0).addClass('active');//1つめのボタンにactive（クラス）を付与
            $('.index_btn').not($('.index_btn').eq(0)).removeClass('active');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-slideSize)+'px)');//1か所目
            clearAutoslider=setTimeout(autoslider1,time);

        }else if( loopCounter < slideLength ){
            $('.slides').addClass('transition');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-slideSize)+'px)');//2か所目
            activeMethod();
            clearAutoslider=setTimeout(autoslider1,time);

        }else{
            $('.slides').removeClass('transition');
            setTimeout(autoslider2,0);
        }
        
    }

autoslider1の中のif文の中に2か所

//======= index_btnを押した時のスライド制御 =======//

    $('.index_btn').click(function(){
       btnIndex=$('.index_btn').index( $(this) );
        $('.slides').css('transform','translateX('+btnIndex*(-slideSize)+'px)');//3か所目
            if( $('#slide_stoper').hasClass('stop') ){
                clearTimeout(clearAutoslider);
                loopCounter=btnIndex;
                activeMethod();
            }else{
                clearTimeout(clearAutoslider);
                loopCounter=btnIndex;
                activeMethod();
                clearAutoslider=setTimeout(autoslider1,time);
            }
    });

indedx_btnを押した時のスライド制御の中に1か所あります。
この変更を加えることで、htmlのslide_sizeのクラス名をLにすれば、スライドのサイズは1200pxになり、クラス名をMにすれば、スライドのサイズは800pxになります。

おわりに

今回はスライドのサイズを簡単に変更できるようにしました。
次回は自動で動くスライドの最終回です。
今回でスライドの大きさをL、Mのどちらかのサイズに変更することが可能になりましたが、もっと細かくサイズ指定したい場合もあるとおもいますので、次回は任意の数値を指定できるように変更を加えていきます。
それでは、今回はこのあたりで(^^)/