はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はＰＨＰを勉強しています。ＷＥＢサイト制作(WordPress対応)をとりあえずの目標としております！！それとゲーム実況もやっております！見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

はとむぎのカテゴリー

H&Rブログ > JavaScript > スライド > スライドのサイズを指定のサイズに変更しよう！

スライドのサイズを指定のサイズに変更しよう！

JavaScript

2020/9/9 2020/9/9

どうもRyokutyaです。
今回は自動で画像が動くスライドの最終回です。

今回やること

前回は、switch文を使ってあらかじめ用意しておいたサイズに変更する方法を紹介しました。
今回は、更新者が好きな大きさに変更する方法を説明していきます。

コードの紹介

自動で画像が動くスライドの最終回なので、全コードを載せておきます。

html

<!-- ----- carousel2 ----- -->
    <section class="carousel">
        <div class="carousel_h">
          <h1>Carousel 2</h1>
        </div>
        <div class="slider_wrapper">
          <p class="slider_title">carousel  一定時間が経過するとスライドが自動で移動する</p>
  
            <div class="slides_container" id="">
              <div class="slides_case">
                <ul class="slides transition" id="slide_case">
                  <li class="slide"><img src="./img/1.png" alt=""></li>
                  <li class="slide"><img src="./img/2.png" alt=""></li>
                  <li class="slide"><img src="./img/3.png" alt=""></li>
                  <li class="slide"><img src="./img/4.png" alt=""></li>
                  <li class="slide"><img src="./img/5.png" alt=""></li>
                </ul>
              </div>
            </div>
  
          <div class="index_btn_wrapper">
            <ul id="index_btn_cover" class="slide_stop">
            </ul>
          </div>

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

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

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

        </div>
      </section>

css

.carousel {
  padding-top: 20px;
  padding-bottom: 20px;
}

.slider_title {
  font-size: 32px;
  text-align: center;
}

.slides_container {
  overflow: hidden;
  position: relative;
}

.slides {
  text-align: center;
  list-style: none;
  padding-left: 0;
  white-space: nowrap;//折り返し（カラム落ち）させないよにする（親要素であるulに対して指定すること）
  letter-spacing: -0.4em;//inline,inline-blockの時にできるimg間の隙間をなくすため
}

.slides img {
  width: 100%;
  height: 500px;
}

.transition {
  transition: transform 1s;
}

.slide {
  padding: 30px;
  box-sizing: border-box;
  transform: translateX(-100%);
}

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

.slides_case {
  margin: 0 auto;
}

//=================================================//
//slide部分 end
//=================================================//

//ボタンデザイン1
.index_btn {
  background-color: red;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
}

// btnの位置調整
.index_btn_wrapper {
  padding-top: 40px;
  text-align: center;
}

//slideのon,off
.slide {
  transition: transform 2s ease 0s;
  display: inline-block;
}

.active {
  background-color: blue;
  color: white;
}

JavaScript（JavaScript+jQuery）

var slideList=$('.slide');
    var slideLength=slideList.length;

    //htmlにスライドを追加すると自動でスライドを追加する ①
    var slideCopyRoot=document.getElementById('slide_case');
    for(i=0; i&let;slideLength; i++){
        var slideCopy=slideCopyRoot.children[i].cloneNode(true);
        document.getElementById('slide_case').appendChild(slideCopy);   
    }
    
    var slideCase=document.getElementById('slide_case');
    var slideCaseLastChild=document.getElementById('slide_case').lastElementChild;
    var slideCaseFirstChild=document.getElementById('slide_case').firstElementChild;
    slideCase.insertBefore(slideCaseLastChild,slideCaseFirstChild);
    //

    //=================================================//
    //スライドの画像サイズ 変更
    //=================================================//
    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;

        default:
            var slideArray=$('.slide');
            var slideStyle=window.getComputedStyle(slideArray[0]);
            slideSize=parseInt(slideStyle.width);
            $('.slides_case').css('width',slideSize);
            break;
    }

    //=================================================//
    //indx_btnの作成
    //=================================================//
    for(i=0; i&let;slideLength; i++){
        var indexBtn=document.createElement('li');
        indexBtn.id="index_btn"+i;
        indexBtn.className="index_btn";
        indexBtn.textContent=i+1;
        document.getElementById('index_btn_cover').insertBefore(indexBtn,null);
    }

    //=================================================//
    //index_btnの色変えの制御
    //=================================================//
    $('.index_btn').eq(0).addClass('active');//1つめのボタンにactive（クラス）を付与
    function activeMethod(){
        $('.index_btn').eq(loopCounter).addClass('active');
        $('.index_btn').not($('.index_btn').eq(loopCounter)).removeClass('active');
    }

    //=================================================//
    //autoslider start
    //=================================================//
    var loopCounter=0;
    var clear1;
    var clear2;
    var clear3;
    var clear4;
    var clear5;
    var clear6;
    var time=4000;//スライドが移動する間隔
    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)');
            clear1=setTimeout(autoslider1,time);

        }else if( loopCounter &let; slideLength ){
            $('.slides').addClass('transition');
            loopCounter+=1;
            $('.slides').css('transform','translateX('+loopCounter*(-slideSize)+'px)');
            activeMethod();
            clear2=setTimeout(autoslider1,time);

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

    var autoslider2=function(){
        loopCounter=0;
        $('.slides').css('transform','translateX(0)');
        clear3=setTimeout(autoslider1,100);
    }

    function clearAutoslider(){
        clearTimeout(clear1);
        clearTimeout(clear2);
        clearTimeout(clear3);
        clearTimeout(clear4);
        clearTimeout(clear5);
        clearTimeout(clear6);
    }

    clear4=setTimeout(autoslider1,time);

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

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

    //======= スライドにホバーした時の制御 =======//

    $(".slides_container").hover(
        function () {
         //ホバー時の動作
         test();
        },
        function () {
        //マウスが離れた時の動作
        clear6=setTimeout(autoslider1,time);
        });
        
    //=================================================//
    //autoSlider end
    //=================================================//

コードの説明

今回説明する部分の該当部分です。

//=================================================//
    //スライドの画像サイズ 変更
    //=================================================//
    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;

        default:
            var slideArray=$('.slide');
            var slideStyle=window.getComputedStyle(slideArray[0]);
            slideSize=parseInt(slideStyle.width);
            $('.slides_case').css('width',slideSize);
            break;
    }

前回説明した、switch文のdefault部分を追加しました。
switch文はcase 値:とすることで値と条件式が値と同じ処理を実行してくれるものでしたが、どのcaseの値とも一致しなかった場合の処理をdefaultとして設定できます。
defaultの時の処理として、cssでスライドのサイズを変更した時、cssの値をJavascriptで読み取りcssを変更しています。
defaultの時の処理部分1行目で各スライド（<li>）を取得しています。
スライドが複数枚あるので、取得された要素は配列で取得されます（正確には配列ではないですが）

2行目で.slideのcssを取得しています。
window.getComputedStyle(対象要素)とすることで対象要素のcssを取得してくれます。
※window.getComputedStyle(対象要素)の対象要素は複数個を指定できませんslideArrayは先ほど説明したように配列になっているのでインデックス番号を指定して一つの要素だけを対象としています。各スライドに割り当てられているcssは全て同じなのでインデックス番号はどの番号でも大丈夫です。

3行目
slideStyle（変数）.widthとすることで、.slideのwidthを取得しています。
getComputedStyleで対象要素に割り当てられているcssを全て取得しているので、.取得したいcssとすることで指定したcssの値を取得できます。

この時注意が必要なのはpxなどの単位も一緒に取得することです。
単位がついたままだと後に計算で使う時に不都合なので、parseIntを使って単位を消した状態にします。
parseInt（対象）とすることで対象の単位を削除することができます。
3行目ではgetComputedStyleで取得した値をslideSize（変数）に代入しています。
これで、cssで.slideのwidth（スライドの大きさ）を指定すると自動でスライドを動かす量を変更してくれます。
しかしこれだけだと、スライドの中心がページの中心からずれてしまいます。

これは、スライドの中心をmargin:0 auto;で調整しているためです。
シンプルな形の自動で画像が動くスライドを作った際に各スライドを包括している.slides_caseのwidthを1200pxとして作っているため、.slideの大きさが変わると中心がずれてしまいます。
スライドの中心を画面の中心に持ってくるには、.slides_caseと.slideのwidthを同じすればいいので、4行目で.slides_caseのcssをslideSizeと同じサイズに変更しています。
「画像が自動で動くスライドを自作した」の記事で中心調整について書いているのでよかったら戻って確認してみてください。
これで、switch文で用意したサイズ以外のサイズも指定できるようになりました。
※サイズを自由に指定できますが、指定したサイズが小さすぎたり、大きすぎたりして、スライドが画面に4枚以上（2枚以下）表示される場合、デザインが崩れてしまうので調整が必要になります。（3枚表示を前提にデザインしています）