1
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 5 years have passed since last update.

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

Last updated at Posted at 2019-11-22

#いまさらだけどスライダーを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で書き直したりしたらそれなりに勉強になる気がする。
プログラムの世界では車輪の再開発は良くないって言われているけど、
一回自分で簡易的に作っておくと理解が深まって良いかもしれない。

1
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
1
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?