LoginSignup
1
1

More than 1 year has passed since last update.

@ko-7

カルーセル（HTML,CSS,jQueryで作成）

Last updated at Posted at 2021-05-03

webページ作成でよく使用するカルーセルをコピペで作成できるようにコードをここにまとめます。

完成イメージ

フォルダ構成

フォルダ構成は下のようにしています。

root/
　├ index.html
　├ styles.css
　├ main.js
　└ img
　　　├ carousel1.jpg
　　　├ carousel2.jpg
　　　└ carousel3.jpg

下のHTML、CSS、JavaScriptのコードをそのままコピペし、画像のURLを変えればそのまま使えます。

コード

HTML

HTML
<!doctype html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--CSSの読み込み-->
    <link rel="stylesheet" href="./styles.css">
  </head>
　<body>
    <div class="carousel">
　    <!--写真表示部分-->
      <ul class="carousel-area">
        <li class="carousel-list">
          <img class="carousel-img" src="img/carousel1.jpg" alt="carousel1">
        </li>
        <li class="carousel-list">
          <img class="carousel-img" src="img/carousel2.jpg" alt="carousel2">
        </li>
        <li class="carousel-list">
          <img class="carousel-img" src="img/carousel3.jpg" alt="carousel3">
        </li>
      </ul>

　    <!--「次へ」「前へ」移動する矢印-->
      <div class="arrow-wrap">
        <div class="arrow-left">
          <button class="arrow-btn js-btn-back" type="button"></button>
        </div>
        <div class="arrow-right">
          <button class="arrow-btn js-btn-next" type="button"></button>
        </div>
      </div>

    　<!--ページネーション-->
      <div class="pagination">
        <span class="pagination-circle target"></span>
        <span class="pagination-circle"></span>
        <span class="pagination-circle"></span>
      </div>
    </div>

    <!--jQueryの読み込み-->
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" 
    type="text/javascript"></script>
    <!--javascriptファイルの読み込み-->
    <script src="./main.js" type="text/javascript"></script>
  <body>
</html>

CSS

CSS
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}

body {
  overflow: hidden;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
}
.carousel {
  width: 600px;
  height: calc(600px * 0.5625);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.carousel .carousel-area {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
}

.carousel .carousel-area .carousel-list {
  width: 600px;
  height: calc(600px * 0.5625);
  margin-right: 30px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel .carousel-area .carousel-list:nth-child(1) {
  background-image: url(./img/carousel1.jpg);
}

.carousel .carousel-area .carousel-list:nth-child(2) {
  background-image: url(./img/carousel2.jpg);
}

.carousel .carousel-area .carousel-list:nth-child(3) {
  background-image: url(./img/carousel3.jpg);
}

.carousel .carousel-area .carousel-list .carousel-img {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

.carousel .arrow-wrap {
  width: 96%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 2%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.carousel .arrow-wrap .arrow-btn {
  width: 48px;
  height: 48px;
  background-color: rgba(113, 135, 245, 0.8);
  border-radius: 50%;
  -webkit-transition: .2s;
  transition: .2s;
}

.carousel .arrow-wrap .arrow-btn:focus {
  -webkit-box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}

.carousel .arrow-wrap .arrow-btn:hover {
  background-color: #334fd8;
  -webkit-box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}

.carousel .arrow-wrap .arrow-left {
  position: relative;
}

.carousel .arrow-wrap .arrow-left button:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-30%, -50%) rotate(-45deg);
          transform: translate(-30%, -50%) rotate(-45deg);
}

.carousel .arrow-wrap .arrow-right {
  position: relative;
}

.carousel .arrow-wrap .arrow-right button:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-70%, -50%) rotate(135deg);
          transform: translate(-70%, -50%) rotate(135deg);
}

.carousel .pagination {
  width: 16%;
  margin: 5% auto 0;
  position: absolute;
  bottom: 3%;
  left: 42%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.carousel .pagination .pagination-circle {
  width: 10px;
  height: 10px;
  border: 1px solid #333;
  border-radius: 50%;
  background-color: rgba(10, 10, 10, 0.5);
}

.carousel .pagination .pagination-circle.target {
  background-color: rgba(10, 10, 100, 0.8);
}

@media screen and (max-width: 600px) {
  .carousel {
    width: 300px;
    height: calc(300px * 0.5625);
  }
  .carousel .carousel-area .carousel-list {
    width: 300px;
    height: calc(300px * 0.5625);
    margin-right: 0;
  }
}

JavaScript

JavaScript
$(function(){
  // スライドリストの合計幅を計算⇒ＣＳＳでエリアに代入
  let width = $('.carousel-list').outerWidth(true); //.carouse-listの１枚分の幅
  let length = $('.carousel-list').length; //.carousel-listの数
  let slideArea = width * length; //レール全体幅＝スライド１枚の幅　×　スライドの合計数
  $('.carousel-area').css('width', slideArea); //カルーセルレールに計算した合計幅を指定

  //スライド現在値と最終スライド
  let slideCurrent = 0; //スライドの現在値（１枚目のスライド番号としての意味も含む）
  let lastCurrent = $('.carousel-list').length - 1; //スライドの合計数＝最後のスライド番号

  //スライドの切り替わりを「changeslide」として定義
  function changeslide(){
    $('.carousel-area').stop().animate({ //stopメソッドを入れることでアニメーション１回毎に止める
      left: slideCurrent * -width //代入されたスライド数　×　リスト１枚分の幅を左に動かす
    });
    //ページネーションの変数を定義（＝スライド現在値が必要）
    let pagiNation = slideCurrent + 1; //nth-of-typeで指定するため0に+1をする
    $('.pagination-circle').removeClass('target'); //targetクラスを削除
    $(".pagination-circle:nth-of-type(" + pagiNation + ")").addClass('target') //現在のボタンにtargetクラスを追加
  };

  //-----一定時間毎に処理実行する関数「startTimer」を定義
  let Timer;
  function startTimer(){
    Timer = setInterval(function(){
      if (slideCurrent === lastCurrent){
        slideCurrent = 0;
        changeslide();
      }else{
        slideCurrent++;
        changeslide();
      };
    }, 3000);
  };
  function stopTimer(){
    clearInterval(Timer); //crearInterval:setIntervalで設定したタイマーを取り消す
  };
  startTimer();

  //-----------ボタンクリック時の「changeslide」関数を呼び出し----------------
  //NEXTボタン
  $('.js-btn-next').click(function(){
    stopTimer();
    startTimer();
    if (slideCurrent === lastCurrent){ //現在のスライドが最終スライドの場合
      slideCurrent = 0;
      changeslide(); //スライド初期値の値を代入して関数実行（初めのスライドに戻す）
    }else{
      slideCurrent++;
      changeslide(); //そうでなければスライド番号を増やして（次のスライドに切り替え）関数実行
    };
  });
  //BACKボタン
  $('.js-btn-back').click(function(){
    stopTimer();
    startTimer();
    if (slideCurrent === 0){ //現在のスライドが初めのスライドの場合
      slideCurrent = lastCurrent;
      changeslide(); //最後のスライド番号を代入して関数実行（最後のスライドに移動）
    }else{
      slideCurrent--;
      changeslide(); //そうでなければスライド番号を減らして（前のスライドに切り替え）関数実行
    };
  });
})




蛇足：CSS(SCSSバージョン) ※下のコードは不要です

下のコードは不要ですが、上のCSSコードは下のSCSSコードをコンパイルしたものですので、一応このコードもこちらに記載しておきたいと思います。

CSS
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
body{
  overflow: hidden;
}
button{
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
}
.carousel{
      width: 600px;
      height: calc(600px * 0.5625);
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      .carousel-area{
        // width: 3150px;
        height: 100%;
        display: flex;
        position: absolute;
        .carousel-list{
          width: 600px;
          height: calc(600px * 0.5625);
          margin-right: 30px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          &:nth-child(1){background-image: url(./img/carousel1.jpg)};
          &:nth-child(2){background-image: url(./img/carousel2.jpg)};
          &:nth-child(3){background-image: url(./img/carousel3.jpg)};
          .carousel-img{
            width: 1px;
            height: 1px;
            clip: rect(1px, 1px, 1px, 1px);
            -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
            margin: -1px;
            padding: 0;
            overflow: hidden;
            position: absolute;
          }
        }
      }
      .arrow-wrap{
        width: 96%;
        height: 100%;
        margin: 0 auto;
        position: absolute;
        top: 0;
        left: 2%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .arrow-btn{
          width: 48px;
          height: 48px;
          background-color: rgba(113, 135, 245, 0.8);
          border-radius: 50%;
          transition: .2s;
          &:focus{
            box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          }
          &:hover{
            background-color: rgb(51, 79, 216);
            box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          }
        }
        .arrow-left{
          position: relative;
          button:before{
            content: "";
            width: 10px;
            height: 10px;
            // cursor: pointer;
            border-top: 2px solid #fefefe;
            border-left: 2px solid #fefefe;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-30%, -50%)rotate(-45deg);
          }
        }
        .arrow-right{
          position: relative;
          button:before{
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #fefefe;
            border-left: 2px solid #fefefe;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-70%, -50%)rotate(135deg);
          }
        }
      }
      .pagination{
        width: 16%;
        margin: 5% auto 0;
        position: absolute;
        bottom: 3%;
        left: 42%;
        display: flex;
        justify-content: space-around;
        .pagination-circle{
          width: 10px;
          height: 10px;
          border: 1px solid #333;
          border-radius: 50%;
          background-color: rgba(10, 10, 10, 0.5);
          &.target{
            // background-color: rgba(10, 10, 10, 0.8);
            background-color: rgba(10, 10, 100, 0.8);
          }
        }
      }
    }
    @media screen and (max-width: 600px){
      .carousel{
        width: 300px;
        height: calc(300px * 0.5625);
        .carousel-area{
          // width: 1500px;
          .carousel-list{
            width: 300px;
            height: calc(300px * 0.5625);
            margin-right: 0;
          }
        }
      }
    }


参考サイト

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1