いまさらだけどスライダーをjQueryで作った

今まで何度となくスライドを実装してきたけど、仕事では常にプラグインを使って実装してきて、自作ってしたこと無かったと思い、以下のような簡単なスライドを作ってみた。

See the Pen rNNbMwM by YusukeIkeda (@YusukeIkeda) on CodePen.

HTML

HTMLは説明割愛。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルスライド</title>
<link rel="stylesheet" type="text/css" href="assets/reset.css">
<link rel="stylesheet" type="text/css" href="assets/slide.css">
</head>
<body>
<div class="slideContainer">
    <div class="slideArea">
      <ul class="slide-list js-slide">
        <li class="slide-list-item"><img src="assets/img/sample01.jpg" alt="sample01"></li>
        <li class="slide-list-item"><img src="assets/img/sample02.jpg" alt="sample02"></li>
        <li class="slide-list-item"><img src="assets/img/sample03.jpg" alt="sample03"></li>
        <li class="slide-list-item"><img src="assets/img/sample04.jpg" alt="sample04"></li>
        <li class="slide-list-item"><img src="assets/img/sample05.jpg" alt="sample05"></li>
      </ul>
    </div>
    <div class="buttonArea">
      <ul class="button-list">
        <li class="button-list-item"><input type="button" value="prev" class="js-prev"></li>
        <li class="button-list-item"><input type="button" value="next" class="js-next"></li>
      </ul>
    </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="assets/slide.js"></script>
</body>
</html>

CSS

CSSも説明割愛。

CSS

@charset "utf-8";

.slideContainer {
  width: 400px;
  margin: auto;
}
.slideArea {
  overflow:  hidden;
}
.slide-list {
  display: flex;
  transform: translateX(0);
  transition: all 0.25s ease-out;
}
.button-list {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.button-list-item {
  padding: 0 10px;
}

JavaScript

即時関数の先頭に記載されてるセミコロンは、先に読み込まれたJSファイルがセミコロンで終了していなくても正常に動作するように保守性の意味で記載したもの。
他は特に説明するところは無いかも…。

JavaScript

;(function() {
  'use strict';

  const $slide = $('.js-slide').children('li');
  const $next  = $('.js-next');
  const $prev  = $('.js-prev');

  const simpleSlide = () => {
    const length = $slide.length;
    const width  = $slide.width();
    let   index  = 0;

    $next.on('click', () => {
      $next.prop("disabled", false);
      $prev.prop("disabled", false);
      if(index < (length-1)) {
        index ++;
        $('.js-slide').css(`transform`, `translateX(${-(width * index)}px)`);
      } else {
        $next.prop("disabled", true);
      }
    });
    $prev.on('click', () => {
      $next.prop("disabled", false);
      $prev.prop("disabled", false);
      if(index > 0) {
        index --;
        $('.js-slide').css(`transform`, `translateX(${-(width * index)}px)`);
      } else {
        $prev.prop("disabled", true);
      }
    });
  }
  simpleSlide();
})();

まとめ

もっと良い書き方あると思うけど、自動スクロールもレスポンシブ対応も無い
ホントに最低限の機能だけ実装するならこんな感じなんですかね？

これに機能追加したり、Vueで書き直したりしたらそれなりに勉強になる気がする。
プログラムの世界では車輪の再開発は良くないって言われているけど、
一回自分で簡易的に作っておくと理解が深まって良いかもしれない。

今更jQueryでスライドショーを自作してみた

いまさらだけどスライダーをjQueryで作った

HTML

CSS

JavaScript

まとめ