はとむぎ

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

はとむぎのカテゴリー

H&Rブログ > JavaScript > スライド > prev,nextボタンを追加しよう

prev,nextボタンを追加しよう

JavaScript

2020/8/12 2020/8/19

どうもRyokutyaです。
今回はスライド（パターン1）に「1つ進むボタン」と「1つ戻るボタン」を追加していきます。

今回やること

今回は最初に作ったスライド（パターン１）に「1つ進むボタン」と「1つ戻るボタン」の機能を追加していきます。
インデックスボタンと併用して使うこともできますし単独でも使うことができます。
よく見かける機能ですので、良かったら参考にしていただければ幸いです。

コードの紹介

今回もコピペ用にコードを貼っておきます。
※コピペ用はインデックスボタンと「1つ進むボタン」の併用です。
※コピペ用なので以前に説明した部分も含め全て載せてあります。

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>

          <!-- prev,next_btn　(new) -->
            <div class="prev_btn"></div>
            <div class="next_btn"></div>
        <div class="index_btn_wrapper">
          <ul id="index_btn_cover" class="">
          </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;
  transition: transform 2s ease 0s;
  padding-left: 0;
}

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

.slide {
  display: inline-block;
}

.prev_btn {
  border-left: 3px solid #000;
  border-bottom: 3px solid #000;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 100px;
  cursor: pointer;
}

.next_btn {
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  width: 30px;
  height: 30px;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  right: 100px;
  cursor: pointer;
}

.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（JavaScript+jQuery）

jQuery(function($){
    let slideList=$('.slide');
    let slideLength=slideList.length;
    let index=0;

    //=================================================//
    //indx_btnの作成 
    //=================================================//

    for(i=0; i<slideLength; i++){
        let 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);
    }
    

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

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

    
    //=================================================//
    //next_btnを押した時の制御(new)
    //=================================================//
    $('.next_btn').click(function(){
        index+=1;
        if(index < slideLength){
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }else{
            index=0;
            $('.slides').css('transform','translate(0)');
    });

    //=================================================//
    //prev_btnを押した時の制御 (new)
    //=================================================//
    $('.prev_btn').click(function(){
           index-=1;
        if(index === -1){
            index=slideLength-1;
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }else{
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }
    }
    });

コードの説明

htmlとcssの解説

コードの紹介の部分で(new)がついているコードが新しく追加された部分です。

html

 <!-- prev,next_btn　(new) -->
 <div class="prev_btn"></div>
 <div class="next_btn"></div>

htmlでの追加部分はこの2行だけです。
特に説明することもありません。
デザインはcssで行っています。
文字を入れたい場合などはこの部分を変更することでデザインを変えることができます。

css

//prev-btnデザイン
.prev_btn{
    border-left: 3px solid #000;
    border-bottom: 3px solid #000;
    width: 30px;
    height: 30px;
    transform:rotate(45deg);
    position: absolute;
    top:50%;
    left:100px;
    cursor: pointer;
}

//next_btnデザイン
.next_btn{
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    width: 30px;
    height: 30px;
    transform:rotate(-45deg);
    position: absolute;
    top:50%;
    right:100px;
    cursor: pointer;
}

htmlで用意した<div>の幅と高さを30pxにして、必要な場所のみにborderをつけています。
borderをつけたものをtransform:rotate()で回転させています。
線の長さを変更したい場合は幅と高さを変更してください。
太さを変更したい場合はborderの太さを変更してください。
基本的には「1つ進むボタン」と「1つ戻るボタン」のデザインは同じです。
画像を使ったりいろいろデザインを変えてみるのもいいかもしれません。

JavaScript（Javascript+jQuery）

「1つ進むボタン」（next_btn）を押した時

    //=================================================//
//next_btnを押した時の制御(new)
//=================================================//
    $('.next_btn').click(function(){
　　　　　index+=1;
        if(index < slideLength){
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }else{
            index=0;
            $('.slides').css('transform','translate(0)');
        }
    });

    //=================================================//
    //prev_btnを押した時の制御 (new)
    //=================================================//
    $('.prev_btn').click(function(){
　　　　 index-=1;
        if(index === -1){
            index=slideLength-1;
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }else{
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }
    });

「1つ進むボタン」（next_btn）を押した時（クリックした時）次のスライドを表示したいのでindex（変数）に+1します。
こうすることでindex_btnの時と同じコードでスライドを動かすことができます。
しかし、最後のスライドの時に「1つ進むボタン」をクリックするとスライドがない座標に移動してしまいます。
そのため、if文を使用して条件分岐が必要になります。

今回のスライドは画像の移動はindex（変数）の数字を制御することで任意の画像を表示するようになっています。
この方法にすることでスライドごとにindex（変数）の値が固有ため「インデックスボタン」と「1つ進む、戻るボタン」を同時に入れても干渉せずにすみます。
分岐の条件を考える際にもこの「スライドごとにindex（変数）の値が固有」であることを利用します。

 index+=1;
　　　　if(index < slideLength){
          //trueの時の処理
        }else{
          //falseの時の処理
        }

「1つ進む」の場合、index（変数）がslideLength（変数）と同じかそれ以上の値となったとき通常の動作をすると画像が何もない部分を表示することになるので条件式をindex<slideLengthとすることで対応しています。
※index（変数）は0からであることに注意してください。
今回は最後のスライドの時に「1つ進むボタン」を押すと1枚目のスライドが表示されるようにしているため、最後のスライドの時（条件式falseの時）に「1つ進むボタン」がクリックされたときの処理は

index=0;
 $('.slides').css('transform','translate(0)');

としています。
index（変数）を1枚目の固有番号である0にして座標を1枚目のスライドの座標であるtranslate(0)にしています。
今回は最後のスライドの時に「1つ進むボタン」をクリックすると1枚目に戻るようにしたためこのようにしましたが、最後のスライドの時に「1つ進むボタン」を押しても「何もおこらない」ようにしたい場合もあるかと思います。
その場合は、条件式でfalseになったときの処理を何も記述しなければ実現可能です。

「1つ戻るボタン」（prev_btn）を押した時

考え方は「1つ進むボタン」を押した時と同じです。
基本はボタンを押すごとにindex（変数）の値を-1することで座標を制御します。
1枚目のスライドが表示されている時に「1つ戻るボタン」を押すと画像が何もない座標が表示されてしまうので、条件分岐が必要になります。
「1つ進む」場合スライドの枚数によって最後のスライド番号（indexの番号）が変動するため条件式にslideLengthを使用しましたが、1枚目のスライドはスライドの総数がいくつでもあってもスライド番号（indexの番号）は常に0です。
ですのでindex（変数）の値が0以下になったときを分岐の条件とすれば1枚目スライドの時の分岐がうまくいきます。

//=================================================//
    //prev_btnを押した時の制御 (new)
    //=================================================//
    $('.prev_btn').click(function(){
　　　　 index-=1;
        if(index === -1){
            index=slideLength-1;
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }else{
            $('.slides').css('transform','translate('+(index*-100)+'%)');
        }
    });

今回は条件分岐をindex ===-1としているためtrueの時の処理が1枚目のスライドの時の処理となります。
1枚目のスライドの時「1つ戻るボタン」を押すと最後のスライドが表示されるようにしているため、index（変数）の値を更新する必要があるので、忘れないように注意してください。

おわりに

今回は「1つ進むボタン」と「1つ戻るボタン」を追加する方法について説明しました。
よく見かけるスライドでもあるので是非利用していただければと思います。
次回は画像をクリックすると画像がスライドする機能を追加する方法を説明します。
興味がある方は是非次回の記事も読んでいただければとおもいます。
それでは今回はこのあたりで(^^)/