LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@YJ2222(裕司 増島)

JQuery自作スライダー

Posted at

自作のスライダーを作成したので、自分へのメモ。今更JQueryかよって思うかもしれませんが、手軽にパパッと作りたかったのでJqueryで作りました。

aaa885e99997f1687150463ac3cdd9bb.gif

誰もが思うような、自動のスライダーというよりも、リスト化されたものの中から１つを選んで見れるような手動の形のものです。ただsetTimeOutとかを使えば自動に改造することができると思います。是非参考にしてください。

今回の用途としては、例えばホームページがあって、画像や動画の作品集か何かを紹介するみたいな想定です。縦長なページで画像や動画を配置してもいいのですがなんかそれだけだと素気ない感じだったので、横に動く様なものを作ってみました。

環境

・JQuery
・bootstrap4
・FontAwesome
・HTML/CSS

ちなみにJSのAPIやBootstrapにもスライダーありますが、どれも既存のデザインを変えるのが少し手間なので自作にした経緯もあります。自作でもそんな難しくはないのでメンテのし易さを考えたら自作の方がいいかなと思います。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!-- for responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Fontawesome CSS -->
    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
    <!-- General css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- General css -->
    <script src="js/main.js"></script>

    <title>Simple Html App</title>
  </head>
  <body>

    <main>
      <div class="main2 bg-dark my-5">
        <div class="main2__slider w-100 h-100">
          <div class="main2__slider--item item1 fromtItem">
            <img src="image/image_1.jpeg" alt="">
          </div>
          <div class="main2__slider--item item2 bgItem bgItem--right">
            <img src="image/image_2.jpeg" alt="">
          </div>
          <div class="main2__slider--item item3 bgItem">
            <img src="image/image_3.jpeg" alt="">
          </div>
          <div class="main2__slider--item item4 bgItem bgItem--left">
            <img src="image/image_4.jpeg" alt="">
          </div>
          <div class="main1__slider--chevron chevronRight">
            <i class="fas fa-chevron-circle-right text-white h1 px-1"></i>
          </div>
          <div class="main1__slider--chevron chevronLeft">
            <i class="fas fa-chevron-circle-left text-white h1 px-1"></i>
          </div>
        </div>

      </div>
    </main>

  </body>
</html>

基本Bootstrapのスターターテンプレートです。ありがたいことに、これでJQueryも使える様になります。

※fontawesomeはアカウント作成しCDNを取得しないといけません。

reset.cssを使っています。調べればたくさんあるので自身で好きなものを使用してください。

css/style.css
.main2{
  width: 100vw;
  height: 330px;
}

.main2__slider{
  position: relative;
}

.main2__slider--item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}

.main2__slider--item > img{
  width: 500px;
  height: 300px;
}

.fromtItem{
  z-index: 100;
}

.bgItem{
  z-index: 99;
  opacity: 0.5;
}

.bgItem--left{
  left: 0;
  transform: translate(0, -50%) scale(0.8,0.8);
}

.bgItem--right{
  left: 100%;
  transform: translate(-100%, -50%) scale(0.8,0.8);
}

.main1__slider--chevron{
  height: 300px;
  line-height: 300px;
  z-index: 101;
}

.main1__slider--chevron.chevronRight{
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(250px, -50%);
}

.main1__slider--chevron.chevronLeft{
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-250px, -50%);
}

.main1__slider--chevron > i{
  opacity: 0.9;
}

ここは特に言うことないです。

js/main.js
$(function(){

  // 自作スライダー。バックグラウンドのアイテムを少し見せてフロントアイテムが少し浮いているように見せる。
  var chevronRight = $(".chevronRight");
  var chevronLeft = $(".chevronLeft");
  var maximunItem = "item" + $(".main2__slider--item").length;
  var fromtItem;
  var bgItem_right;
  var bgItem_right_classNmae;
  var bgItem_left;
  var bgItem_left_classNmae;

  chevronRight.click(function(){
    fromtItem = $(".fromtItem")
    bgItem_right = $(".bgItem--right");
    bgItem_left = $(".bgItem--left");
    bgItem_left_classNmae =  bgItem_left.attr("class").split(/\s+/)[1];

    /* 
      スライダーの方向は右回りなので、frontItem→bgItem--right、bgItem--right→隠れ要素、
      隠れ要素→bgItem--left、bgItem--left→fromtItemとなる。
    */
    fromtItem.removeClass("fromtItem").addClass("bgItem bgItem--right");
    bgItem_right.removeClass("bgItem--right")
    bgItem_left.removeClass("bgItem bgItem--left").addClass("fromtItem");

    /*
      現bgItem--leftのitem"nn"によって次のbgItem--leftを特定している。
      ただし現bgItem--leftがitem1だった場合は計算式に当てはまらないが、
      一番数字の大きいitem"nn"と決まっているのでifで分岐させる。
    */ 
    if(bgItem_left_classNmae == "item1"){
      $(".main2__slider").children("." + maximunItem).addClass("bgItem--left");
      return;
    }
    $(".main2__slider").children(".item" + (Number(bgItem_left_classNmae.replace("item","")) - 1)).addClass("bgItem--left");
  })
  // 周り方が逆なだけで、基本的には同じような仕組み。
  chevronLeft.click(function(){
    fromtItem = $(".fromtItem")
    bgItem_right = $(".bgItem--right");
    bgItem_right_classNmae =  bgItem_right.attr("class").split(/\s+/)[1];
    bgItem_left = $(".bgItem--left");

    fromtItem.removeClass("fromtItem").addClass("bgItem bgItem--left");
    bgItem_right.removeClass("bgItem bgItem--right").addClass("fromtItem");
    bgItem_left.removeClass("bgItem--left");

    if(bgItem_right_classNmae == "item4"){
      $(".main2__slider").children(".item1").addClass("bgItem--right");
      return;
    }
    $(".main2__slider").children(".item" + (Number(bgItem_right_classNmae.replace("item","")) + 1)).addClass("bgItem--right");
  })
})

コメントを見て頂ければなんとなく使用がわかると思います。「左・メイン・右・隠し要素」の順に並んでいて、当てるCSSによって、前面に見えたり、左右にずれたりしてます。あとは押したアイコンによってそれぞれ要素に当てるCSSを削除追加してスライドしてる様に見せる仕組みです。

まとめ

ざっくりとした説明で申し訳ありませんが、大体こんな感じです。ただ今回本当に思いつくまま書いてみたのでプロの方からするとダメ出したくさんあると思います。勉強します。
以上です。最後までありがとうございました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?