はとむぎ

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

はとむぎのカテゴリー

H&Rブログ > JavaScript > スライド > JavaScript（jQuery）でスライドを作ろう！｜パターン1

JavaScript（jQuery）でスライドを作ろう！｜パターン1

JavaScript

2020/8/8 2020/8/19

どうもこんにちは、Ryokutyaです。
いくつかスライド（カルーセル）を自作したので何回かに分けて紹介していきたいと思います。
サイト作成される際に参考になれば幸いです。

今回のスライドについて

今回紹介するスライドは最もシンプルなスライドです。
画像の下にボタンがあり、そのボタンを押すと対応する画像を表示するというものです。
※動きのサンプルを動画で確認できます。（カクカクしているのはPCのスペックのせいなので気にしないください）

コードの紹介

それでは早速コードを紹介していきましょう。
コードの説明に興味がない人はここからコピペして使ってください。

html

<section class="carousel">
      <div class="carousel_h">
        <h1>Carousel 1</h1>
      </div>
      <div class="slider_wrapper">
        <p class="slider_title">carousel  スライド移動</p>

          <div class="slides_container">
            <div class="slides_inner">
              <ul class="slides" 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="">
　　　　    <li class="index_btn">1</li>
　　　　    <li class="index_btn">2</li>
　　　　    <li class="index_btn">3</li>
　　　　    <li class="index_btn">4</li>
　　　　    <li class="index_btn">5</li>
　　      </ul>
        </div>
      </div>
    </section>

css

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

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

.slides_container {
  padding: 0 50px;
  position: relative;
}

.slides_container .slides_inner {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  white-space: nowrap;
  letter-spacing: -0.4em;
  overflow: hidden;
}

.slides_container .slides {
  list-style: none;
  padding-left: 0;
}

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

.slide {
  display: inline-block;
  transition:transform 2s ease 0s;//slideのtransition(スライドのon,off）
}

.index_btn {
  background-color: red;
  color: white;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.index_btn_wrapper {
  padding-top: 40px;
  text-align: center;
}

JavaScript(jQuery)

let slideList=$('.slide');
let index=0;

    //=================================================//
    //index_btnを押した時の制御
    //=================================================//

    //スライドしながら移動
    $('.index_btn').click(function(){
        //index()は使用するときindex($())となることに注意
        index=$('.index_btn').index($(this));
        $('.slides').css('transform','translate('+(index*-100)+'%)');
    });

コードの説明

それではコードの説明をしていきます。
このコードは最もシンプルなスライドのコードです。ですので、このコードを少し変更するだけでいろいろな機能を付け足すことができます。
コードを変更する際にどの部分がどうなって画像が動いているのかを理解しているとコードに変更を加えやすいので是非見ていってください。

htmlについて

 <div class="slides_container">
  <div class="slides_inner">
    <ul class="slides" 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>

上記の部分がスライドのメイン部です。

<ul></ul>に<li><img></li>として画像を追加することでスライド内の画像を増やすことができます。
コピペして使う場合画像が入っているフォルダの階層やフォルダ名、画像の名前を変更することを忘れないように注意してください。

<div class="index_btn_wrapper">
　　<ul id="index_btn_cover" class="">
　　　　<li class="index_btn">1</li>
　　　　<li class="index_btn">2</li>
　　　　<li class="index_btn">3</li>
　　　　<li class="index_btn">4</li>
　　　　<li class="index_btn">5</li>
　　</ul>
</div>

この部分がボタンに関する部分です。
画像を追加したり削除した場合ボタンの数を変更するのも忘れないようにしてください。

cssについて

.slides_container {
  padding: 0 50px;
  position: relative;
}

.slides_container .slides_inner {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  white-space: nowrap;
  letter-spacing: -0.4em;
  overflow: hidden;
}

.slides_container .slides {
  list-style: none;
  transition: transform 2s ease 0s;
  padding-left: 0;
}

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

.slide {
  display: inline-block;
  transition:transform 2s ease 0s;//slideのtransition(スライドのon,off）
}

クラス名を見ればだいたいわかるかと思いますが、スライド部分に関係しているcssはここだけです。
.slide（画像が収納されている各<li>についているクラス名）の「display」を「inline-block」にすることで画像を横並びにしています。
このままでは親要素からはみ出た部分は折り返して下段に配置されます。

この折り返しを無くしたいので「white-space」を「nowrap」にして折り返し（カラム落ち）させないようにしています。
画像をカラム落ちさせないようにするためには親要素である<ul>につける必要があります。

これで横に画像を横に並べることができました。
よくみると画像と画像の間に隙間ができているのがわかるかと思います。
この隙間はinline,inline-blockにしたときにimgとimgの間に勝手にできるものです。
この隙間は今回は邪魔になってくるので消します。
この隙間を消したいときは「letter-spacing」を調整せることでなくすことができます。今回は「-0.4em」としています。

隙間がなくなりましたね。
今回のスライドでは見える画像は1枚だけなので、はみ出した部分を「overflow:hidden;」で隠します。

これで見た目は完成です。

.slidesの

transition:transform 2s ease 0s;//slideのtransition(スライドのon,off）

の部分が画像がスライドさせている部分のcssです。
この一文を消すと画像をスライドさせないで切り替えることができます。
また、2sの部分を変更することでスライドのスピードを変更することができます。
詳しくはcss　transitionなどで検索していただければ幸いです。

//ボタンのデザイン
.index_btn {
  background-color: blue;
  color: white;
  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;
}

ボタンのデザインとボタンの位置に関するcssです。
好きな色や形、位置に調整してみてください。

JavaScriptについて

見た目に関する説明が終わったのでいよいよ動きについて説明していきます。
コードの説明の前に今回作ったスライドがどのようにして動いているかを説明したいと思います。
今回作ったスライドは.slides_innerの中にあるslide_case（画像が入っているケース）が横に移動することで、画像が移動しているように見えるようにしています。

こうすることで一つ一つのスライド（画像）に指示を出さなくてもいいようにしています。（slide_caseを動かすという指示を出すだけですべてのスライドが移動する）

let slideList=$('.slide');
let index=0;

    //=================================================//
    //index_btnを押した時の制御
    //=================================================//

    //スライドしながら移動
    $('.index_btn').click(function(){
        //index()は使用するときindex($())となることに注意
        index=$('.index_btn').index($(this));
        $('.slides').css('transform','translate('+(index*-100)+'%)');
    });

それではコードの説明をしていきます。
変数indexに0を代入します。（2行目）
indexをグローバル変数として、ボタンを押すごとにindexに格納される数字を変更できるようにしています。

index_btnを押した時の制御

クリックイベントでボタンを押した時に処理を実行するようにします。
クリックイベント内で変数indexの数字を書き換えています。

//index()は使用するときindex($())となることに注意
index=$('.index_btn').index($(this));

対象要素.index()とすることで対象要素が何番目の要素かを取得することができます。
このとき得られる番号は0から始まることに注意してください。
今回で言えば対象要素にindex_btnをしていしているので、index_btnというクラス名がついている要素を上から順番に数え何番目の要素かを取得できます。
引数としてクリックした場所を指定しているため、クリックしたボタンが何番目のボタンかを取得しています。
1番のボタンを押せば変数indexには0が代入されます。2番を押せば1が代入されます。

 $('.slides').css('transform','translate('+(index*-100)+'%)');

次の一文で、.slides（画像が入っている<ul>）を移動させています。
対象要素.css(‘cssの指定’,’cssの値’）とすることでcssを書き換えたり追加したりできます。
今回は.slidesの「transform:translate()」を変更することで移動させています。
translate()の()の中身を-100％にすると2枚目のスライド（画像）が、-200％にすると3枚目のスライドが見える位置にきます。
これを計算してだした部分がindex*-100の部分です。
こうすることでボタンを押した時にindexが対応したボタンの番号に書き換えられるため、.slides（画像が入っている<ul>）が移動します。
対象要素.css(‘cssの指定’,’cssの値’）の引数は文字列で指定する必要があります。
ですので、計算式や変数などを使いたい場合は「文字の連結」を使用しなくてはいけないことに注意してください。

これでシンプルなスライドの完成です。