javaScriptを使って画像スライダーを実現させたい！

前提・実現したいこと

画像スライダーを実現させたい。

発生している問題・エラーメッセージ

値を取得できず、スライダー機能が動きません。

該当のソースコード

javaScript
1var currentItemNum = 1;
2var $slideContainer = $('.slider__container'); 
3var slideItemNum = $('.slider__item').length;
4var slideItemWidth = $('.slider__item').innerWidth();
5var slideContainerWidth = slideItemWidth * slideItemNum;
6var DURATION = 500;
7
8$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');
9
10$('.js-slider-next').on('click', function (){
11	if(currentItemNum < slideItemNum){
12		$slideContainer.animate({left: '-='+slideItemWidth+'px'}, DURATION);
13			currentItemNum++;
14	}
15});
16
17$('.js-slider-prev').on('click', function (){
18	if(currentItemNum > 1){
19		$slideContainer.animate({left: '+='+slideItemWidth+'px'}, DURATION);
20			currentItemNum--;
21	}
22});

HTML
1<div class="main">
2    <div class="slider">
3      <i class="fa fa-angle-left slider__nav slider__prev js-slider-prev" aria-hidden="true"></i>
4      <i class="fa fa-angle-right slider__nav slider__next js-slider-next" aria-hidden="true"></i>
5      <ul class="slider__container">
6        <li class="slider__item slider__item1">IMG1</li>
7        <li class="slider__item slider__item2">IMG2</li>
8        <li class="slider__item slider__item3">IMG3</li>
9        <li class="slider__item slider__item4">IMG4</li>
10        <li class="slider__item slider__item5">IMG5</li>
11      </ul>
12    </div>
13  </div>
14  <script src="https://code.jquery.com/jquery-3.4.1.js"
15  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
16  crossorigin="anonymous"></script>
17  <script src="app.js"></script>

css
1body {
2	background: #f6f5f4;
3	color: #333;
4}
5
6.main {
7	width: 980px;
8	margin: 30px auto;
9}
10
11.slider {
12	width: 980px;
13	height: 400px;
14	overflow: hidden;
15	position: relative;
16}
17
18.slider__container {
19	padding: 0;
20	overflow: hidden;
21	margin: 0;
22	list-style: none;
23	position: relative;
24}
25
26.slider__item {
27	width: 980px;
28	height: 400px;
29	background: #333;
30	color: #fff;
31	float: left;
32	text-align: center;
33	line-height: 400px;
34	font-size: 5em;
35}
36
37.slider__item2 {
38	background: #efb030;
39}
40
41.slider__item3 {
42	background: #ef5b33;
43}
44
45.slider__item4 {
46	background: #a737ef;
47}
48
49.slider__item5 {
50	background: #414eef;
51}
52
53.slider__nav {
54	color: #fff;
55	position: absolute;
56	top: 180px;
57	font-size: 40px !important;
58	cursor: pointer;
59	z-index: 2;
60}
61
62.slider__prev {
63	left: 20px;
64}
65
66.slider__next {
67	right: 20px;
68}

試したこと

$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');

ここまでは問題なく動いているようでした……

補足情報（FW/ツールのバージョンなど）

コンソールでは特にエラーは起きていませんでした。

m.ts10806

2019/05/27 23:25

コードはマークダウンのcode機能を利用してご提示ください。文字化けではなくXSSなどの対策の一環だとは思いますが、ひとまずマークダウン利用すればインデント含めてそのままコードが表示されます。どのような表示になるかはヘルプや他の質問、回答を確認してください。また、ブラウザ開発ツールのコンソールにエラーが出ていないかご確認ください。

negitama_beef

2019/05/27 23:31

ありがとうございます！コンソールでエラーは起きていませんでした！

m.ts10806

2019/05/28 00:00

あとできればCSSもご提示いただけたらと。

negitama_beef

2019/05/28 00:03

追加致しました！

m.ts10806

2019/05/28 00:08

あれ？動きますね。ちゃんとスライドしています。確認されたブラウザは何でしょうか？私の方はChrome最新（74.0）で動作しました。

m.ts10806

2019/05/28 00:09

私の場合は外部CSS、外部JSじゃなくHTMLに直接書き込んでますが、それ以外は同じのはず。もしapp.jsが読み込めていないならエラー出ているはずですし。

mar-kn

2019/05/28 00:13

当方の環境では動きませんでした。＠Chrome74.0.3729.169（Official Build）（64 ビット） <i class="fa fa-angle-left slider__nav slider__prev js-slider-prev" aria-hidden="true">A</i> <i class="fa fa-angle-right slider__nav slider__next js-slider-next" aria-hidden="true">B</i> とかしてあげて、AとかBをクリックすると動きましたが。

m.ts10806

2019/05/28 00:17

Chromeでバージョン同じですね。私の方はiタグに何も入れない現行ソースのままで動いています。ちなみにIE11,Edgeでも動きました。

行動規範の内容に同意します

回答1件

ベストアンサー

コメントで書いた通り、私の環境では動きました。
動作確認したコードそのまま貼っておきます。

ENV
1OS：Windows 10
2ブラウザ：Chrome バージョン: 74.0.3729.169（Official Build） （64 ビット）
3※IE11,Edgeでも動作確認済みです。
4エディタ：Brackets リリース 1.13 ビルド 1.13.1-17699

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
5    <style>
6body {
7    background: #f6f5f4;
8    color: #333;
9}
10
11.main {
12    width: 980px;
13    margin: 30px auto;
14}
15
16.slider {
17    width: 980px;
18    height: 400px;
19    overflow: hidden;
20    position: relative;
21}
22
23.slider__container {
24    padding: 0;
25    overflow: hidden;
26    margin: 0;
27    list-style: none;
28    position: relative;
29}
30
31.slider__item {
32    width: 980px;
33    height: 400px;
34    background: #333;
35    color: #fff;
36    float: left;
37    text-align: center;
38    line-height: 400px;
39    font-size: 5em;
40}
41
42.slider__item2 {
43    background: #efb030;
44}
45
46.slider__item3 {
47    background: #ef5b33;
48}
49
50.slider__item4 {
51    background: #a737ef;
52}
53
54.slider__item5 {
55    background: #414eef;
56}
57
58.slider__nav {
59    color: #fff;
60    position: absolute;
61    top: 180px;
62    font-size: 40px !important;
63    cursor: pointer;
64    z-index: 2;
65}
66
67.slider__prev {
68    left: 20px;
69}
70
71.slider__next {
72    right: 20px;
73}
74    
75    </style>
76  </head>
77  <body>
78    <div class="main">
79      <div class="slider">
80        <i class="fa fa-angle-left slider__nav slider__prev js-slider-prev" aria-hidden="true"></i>
81        <i class="fa fa-angle-right slider__nav slider__next js-slider-next" aria-hidden="true"></i>
82        <ul class="slider__container">
83          <li class="slider__item slider__item1">IMG1</li>
84          <li class="slider__item slider__item2">IMG2</li>
85          <li class="slider__item slider__item3">IMG3</li>
86          <li class="slider__item slider__item4">IMG4</li>
87          <li class="slider__item slider__item5">IMG5</li>
88        </ul>
89      </div>
90    </div>
91    <script src="https://code.jquery.com/jquery-3.4.1.js"
92  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
93  crossorigin="anonymous"></script>
94    <script>
95var currentItemNum = 1;
96var $slideContainer = $('.slider__container'); 
97var slideItemNum = $('.slider__item').length;
98var slideItemWidth = $('.slider__item').innerWidth();
99var slideContainerWidth = slideItemWidth * slideItemNum;
100var DURATION = 500;
101
102$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');
103
104$('.js-slider-next').on('click', function (){
105    if(currentItemNum < slideItemNum){
106        $slideContainer.animate({left: '-='+slideItemWidth+'px'}, DURATION);
107            currentItemNum++;
108    }
109});
110
111$('.js-slider-prev').on('click', function (){
112    console.log(this);
113    if(currentItemNum > 1){
114        $slideContainer.animate({left: '+='+slideItemWidth+'px'}, DURATION);
115            currentItemNum--;
116    }
117});
118    
119    </script>
120  </body>
121</html>

初期

1→2

4→5

3←4

投稿2019/05/28 00:24

編集2019/05/28 00:28

m.ts10806

総合スコア80850

negitama_beef

2019/05/28 00:27

ありがとうございます！僕の環境でも実現できました。また注意深く学習に生かしていきます！

m.ts10806

2019/05/28 00:27

結局何が原因だったのでしょう？

mar-kn

2019/05/28 00:41 編集

当方が動かなかったのは、head部に <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" の指定が無かったことが原因のようです。 head部に追加することで動くように（＜＞が表示されるように）なりました。

m.ts10806

2019/05/28 00:42

なるほど。 faクラスがあったのでfontawesomeの導入されたかと思ってたんですが、タグだけ入れて実際は導入できてなかったということですね。確認しておけばよかった・・・。

negitama_beef

2019/05/29 22:20

ありがとうございます…！ <head>内には<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>を入れていたのですが、勘違いしていたようです。。

m.ts10806

2019/05/29 22:21

必要なのはcssのほうですね

行動規範の内容に同意します