同じ動きをする複数のスライダーを動かしたい　

同じ動きをする複数のスライダーを動かしたい　（JavaSprict, CSS)

全く動かず、css（デザイン）自体に不満はないですが、動作がうまく反映しません。動いたとしても１つだけ動く、、までしか突き止められませんでした。JSに問題があるとは思うのですが、どなたかご指摘いただければと思います。

前提

Dream Weaverにて制作。
動作が完璧でない。

該当のソースコード

HTML

<article id="stay">
<div class="stay_slide">
    <span id="prev" class="prev"></span>
   <span id="next" class="next"></span>
   <ul class="indicator">
      <li id="list1"></li>
      <li id="list2"></li>
      <li id="list3"></li>
 ;  </ul>
   
   <div id="slider" class="slider slider1">
      <img class="content content1" src="img/room2.jpg" alt="寿司の写真">
      <img class="content content2" src="img/room5.jpg" alt="肉の写真">
      <img class="content content3" src="img/room1.jpg" alt="前菜の写真">
   </div>
   </div>

<article id="facility">   
<div class="facility_slide">
    <span id="prev" class="prev"></span>
   <span id="next" class="next"></span>
   <ul class="indicator">
      <li id="list1"></li>
      <li id="list2"></li>
      <li id="list3"></li>
   </ul>
   
   <div id="slider" class="slider slider2">
      <img class="content content1" src="img/fasility1.jpg" alt="寿司の写真">
      <img class="content content2" src="img/fasility2.jpg" alt="肉の写真">
      <img class="content content3" src="img/facility3.jpg" alt="前菜の写真">
   </div>
   </div>

    
<article id="meal">
            
<div class="meal_slide">
    <span id="prev" class="prev"></span>
   <span id="next" class="next"></span>
   <ul class="indicator">
      <li id="list1"></li>
      <li id="list2"></li>
      <li id="list3"></li>
   </ul>
   
   <div id="slider" class="slider slider3">
      <img class="content content1" src="img/meal1.jpg" alt="寿司の写真">
      <img class="content content2" src="img/meal2.jpg" alt="肉の写真">
      <img class="content content3" src="img/meal3.jpg" alt="前菜の写真">
   </div>
   </div>

CSS


.stay_slide,.facility_slide, .meal_slide{
    width: 100%;
}


 #stay .next, #facility .next,#meal .next{
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  bottom: 130px;
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}
#stay .next::after , #facility .next::after ,#meal .next::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 3px #828282;
  border-right: solid 3px #828282;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: 10px;
}

#stay .next:hover , #facility .next:hover ,#meal .next:hover {
  background-color: #fff;
  transition: all 0.3s;
}

#stay .prev, #facility .prev,#meal .prev{
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 130px;
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}
#stay .prev::after , #facility .prev::after ,#meal .prev::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 3px #828282;
  border-right: solid 3px #828282;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  left: 15px;
  top: 10px;
}
#stay .prev:hover , #facility .prev:hover,#meal .prev:hover
  {
  background-color: #fff;
  transition: all 0.3s;
}

#stay .slider , #facility .slider ,#meal .slider {
  width:100%;
  display: flex;
  margin: 0 auto;
}

#stay .slider1 , #facility .slide1r ,#meal .slider1 {
  transform: translateX(0);
  transition: all 0.3s;
}

#stay .slider2 , #facility .slider2 ,#meal .slider2 {
  transform: translateX(-100vw);
  transition: all 0.3s;
}

#stay .slider3 , #facility .slider3 ,#meal .slider3 {
  transform: translateX(-200vw);
  transition: all 0.3s;
}

#stay .content, #facility .content ,#meal .content
 {
    width: 100%;
  height:auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#stay .indicator #facility .indicator ,#meal .indicator
 {
  width: 100%;
  position: absolute;
  bottom: 10px;
  display: flex;
  z-index: 10;
  justify-content: center;
  align-items: center;
}

.stay_slide li,.facility_slide li, .meal_slide li {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: relative;
  list-style: none;
  border: 1px #000 solid;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.stay_slide li:after,.facility_slide li:after, .meal_slide li:after 
 {
  content: "";
  width: 20px;
  height: 20px;
  border: 1px #000 solid;
  border-radius: 50%;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 9;
}

 #list1 {
  background-color: #000;
}



var slide = document.getElementById('slider');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var list1 = document.getElementById('list1');
var list2 = document.getElementById('list2');
var list3 = document.getElementById('list3');

    

// クリックイベント

next.addEventListener('click', nextClick);
prev.addEventListener('click', prevClick);

function nextClick() {
  if (slide.classList.contains('slider1') === true) {
    slide.classList.remove('slider1');
    slide.classList.add('slider2');
    list1.style.backgroundColor = 'transparent';
    list2.style.backgroundColor = '#000';
    count = 0;
  } else if (slide.classList.contains('slider2') === true) {
    slide.classList.remove('slider2');
    slide.classList.add('slider3');
    list2.style.backgroundColor = 'transparent';
    list3.style.backgroundColor = '#000';
    count = 0;
  } else if (slide.classList.contains('slider3') === true) {
    slide.classList.remove('slider3');
    slide.classList.add('slider4');
    list3.style.backgroundColor = 'transparent';
    list4.style.backgroundColor = '#000';
    count = 0;
  } else {
    slide.classList.remove('slider4');
    slide.classList.add('slider1');
    list4.style.backgroundColor = 'transparent';
    list1.style.backgroundColor = '#000';
    count = 0;
  }
};

function prevClick() {
  if (slide.classList.contains('slider1') === true) {
    slide.classList.remove('slider1');
    slide.classList.add('slider4');
    list1.style.backgroundColor = 'transparent';
    list4.style.backgroundColor = '#000';
    count = 0;
  } else if (slide.classList.contains('slider2') === true) {
    slide.classList.remove('slider2');
    slide.classList.add('slider1');
    list2.style.backgroundColor = 'transparent';
    list1.style.backgroundColor = '#000';
    count = 0;
  } else if (slide.classList.contains('slider3') === true) {
    slide.classList.remove('slider3');
    slide.classList.add('slider2');
    list3.style.backgroundColor = 'transparent';
    list2.style.backgroundColor = '#000';
    count = 0;
  } else {
    slide.classList.remove('slider4');
    slide.classList.add('slider3');
    list4.style.backgroundColor = 'transparent';
    list3.style.backgroundColor = '#000';
    count = 0;
  }
};

// インジケーター

list1.addEventListener('click', click1);
list2.addEventListener('click', click2);
list3.addEventListener('click', click3);
list4.addEventListener('click', click4);

function click1() {
  slide.classList.add('slider1');
  slide.classList.remove('slider2');
  slide.classList.remove('slider3');
  slide.classList.remove('slider4');
  list1.style.backgroundColor = '#000';
  list2.style.backgroundColor = 'transparent';
  list3.style.backgroundColor = 'transparent';
  list4.style.backgroundColor = 'transparent';
  count = 0;
}

function click2() {
  slide.classList.remove('slider1');
  slide.classList.add('slider2');
  slide.classList.remove('slider3');
  slide.classList.remove('slider4');
  list1.style.backgroundColor = 'transparent';
  list2.style.backgroundColor = '#000';
  list3.style.backgroundColor = 'transparent';
  list4.style.backgroundColor = 'transparent';
  count = 0;
}

function click3() {
  slide.classList.remove('slider1');
  slide.classList.remove('slider2');
  slide.classList.add('slider3');
  slide.classList.remove('slider4');
  list1.style.backgroundColor = 'transparent';
  list2.style.backgroundColor = 'transparent';
  list3.style.backgroundColor = '#000';
  list4.style.backgroundColor = 'transparent';
  count = 0;
}

function click4() {
  slide.classList.remove('slider1');
  slide.classList.remove('slider2');
  slide.classList.remove('slider3');
  slide.classList.add('slider4');
  list1.style.backgroundColor = 'transparent';
  list2.style.backgroundColor = 'transparent';
  list3.style.backgroundColor = 'transparent';
  list4.style.backgroundColor = '#000';
  count = 0;
}

// 自動スライド
var count = 0;

setInterval(() => {
  if (count > 4) {
    count = 0;
    nextClick();
  }
  count++;
  console.log(count);
}, 1000);

Cocode

2023/02/01 01:57

どういう動作をさせたいのか教えていただいてもいいでしょうか？

aswedrftgyh

2023/02/01 02:09

スライダーが三つあり、それぞれ違う写真、項目なので動作は同じですが別にしてあげたいです。矢印を押すと次の写真が表示される仕組みです。

Cocode

2023/02/01 02:27 編集

3つスライダーがあり、それぞれに矢印が左右にあり、例えば2つ目のスライダーの矢印をおしたらどうしたいですか？ 2つ目のスライダーのみ動くかんじです？

Cocode

2023/02/01 02:22

あと、表示くずれていてなにをなさりたいのかよくわからないので、完成のイメージ画像を添付していただくことは可能でしょうか？または参考サイトなど。

aswedrftgyh

2023/02/01 02:28

ご丁寧にありがとうございます！平たく言うと、こちらの動きを三つそれぞれ動かしたいです。この自動でスライドする動作はカットしたいと考えています。 https://codepen.io/shinobi-hattori/pen/abwaPBW

Cocode

2023/02/01 02:31

見本ありがとうございます！

aswedrftgyh

2023/02/01 05:03

ぜひ解決いただければとても幸いです。

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

回答1件

ベストアンサー

仕組み

矢印ボタンやドットナビゲーションボタンをクリックする
クリックしたボタンの祖先要素の.wrapperを取得する
上記で取得した子孫要素たちのみ取得して、動作するようにする

コード修正例

動作確認用サンプル：https://jsfiddle.net/u8tdvoe3/1/

html
1<div class="wrapper">
2  <span class="prev"></span>
3  <span class="next"></span>
4  <ul class="indicator">
5    <li class="list1"></li> <!-- id を classに変更 -->
6    <li class="list2"></li> <!-- id を classに変更 -->
7    <li class="list3"></li> <!-- id を classに変更 -->
8    <li class="list4"></li> <!-- id を classに変更 -->
9  </ul>
10
11  <div class="slider slider1">
12    <div class="content content1">
13      <p>content1</p>
14    </div>
15    <div class="content content2">
16      <p>content2</p>
17    </div>
18    <div class="content content3">
19      <p>content3</p>
20    </div>
21    <div class="content content4">
22      <p>content4</p>
23    </div>
24  </div>
25</div>
26
27<div class="wrapper">
28  <span class="prev"></span>
29  <span class="next"></span>
30  <ul class="indicator">
31    <li class="list1"></li> <!-- id を classに変更 -->
32    <li class="list2"></li> <!-- id を classに変更 -->
33    <li class="list3"></li> <!-- id を classに変更 -->
34    <li class="list4"></li> <!-- id を classに変更 -->
35  </ul>
36
37  <div class="slider slider1">
38    <div class="content content1">
39      <p>content1</p>
40    </div>
41    <div class="content content2">
42      <p>content2</p>
43    </div>
44    <div class="content content3">
45      <p>content3</p>
46    </div>
47    <div class="content content4">
48      <p>content4</p>
49    </div>
50  </div>
51</div>
52
53<div class="wrapper">
54  <span class="prev"></span>
55  <span class="next"></span>
56  <ul class="indicator">
57    <li class="list1"></li> <!-- id を classに変更 -->
58    <li class="list2"></li> <!-- id を classに変更 -->
59    <li class="list3"></li> <!-- id を classに変更 -->
60    <li class="list4"></li> <!-- id を classに変更 -->
61  </ul>
62
63  <div class="slider slider1">
64    <div class="content content1">
65      <p>content1</p>
66    </div>
67    <div class="content content2">
68      <p>content2</p>
69    </div>
70    <div class="content content3">
71      <p>content3</p>
72    </div>
73    <div class="content content4">
74      <p>content4</p>
75    </div>
76  </div>
77</div>

javascript
1const prevBtns = document.querySelectorAll('.prev'); // 変更
2const nextBtns = document.querySelectorAll('.next'); // 変更
3const list1s = document.querySelectorAll('.list1'); // 変更
4const list2s = document.querySelectorAll('.list2'); // 変更
5const list3s = document.querySelectorAll('.list3'); // 変更
6const list4s = document.querySelectorAll('.list4'); // 変更
7// var slide = document.getElementById('slider'); // 削除
8
9
10// クリックイベント
11prevBtns.forEach(btn => btn.addEventListener('click', prevClick)); // 変更
12nextBtns.forEach(btn => btn.addEventListener('click', nextClick)); // 変更
13
14
15function nextClick(e) { // 引数追加
16  const sliderWrapper = e.target.closest('.wrapper'); // 追加
17  const slide = sliderWrapper.querySelector('.slider'); // 追加
18  const list1 = sliderWrapper.querySelector('.list1'); // 追加
19  const list2 = sliderWrapper.querySelector('.list2'); // 追加
20  const list3 = sliderWrapper.querySelector('.list3'); // 追加
21  const list4 = sliderWrapper.querySelector('.list4'); // 追加
22  
23  if (slide.classList.contains('slider1') === true) {
24    slide.classList.remove('slider1');
25    slide.classList.add('slider2');
26    list1.style.backgroundColor = 'transparent';
27    list2.style.backgroundColor = '#000';
28    count = 0;
29  } else if (slide.classList.contains('slider2') === true) {
30    slide.classList.remove('slider2');
31    slide.classList.add('slider3');
32    list2.style.backgroundColor = 'transparent';
33    list3.style.backgroundColor = '#000';
34    count = 0;
35  } else if (slide.classList.contains('slider3') === true) {
36    slide.classList.remove('slider3');
37    slide.classList.add('slider4');
38    list3.style.backgroundColor = 'transparent';
39    list4.style.backgroundColor = '#000';
40    count = 0;
41  } else {
42    slide.classList.remove('slider4');
43    slide.classList.add('slider1');
44    list4.style.backgroundColor = 'transparent';
45    list1.style.backgroundColor = '#000';
46    count = 0;
47  }
48}
49
50function prevClick(e) { // 引数追加
51  const sliderWrapper = e.target.closest('.wrapper'); // 追加
52  const slide = sliderWrapper.querySelector('.slider'); // 追加
53  const list1 = sliderWrapper.querySelector('.list1'); // 追加
54  const list2 = sliderWrapper.querySelector('.list2'); // 追加
55  const list3 = sliderWrapper.querySelector('.list3'); // 追加
56  const list4 = sliderWrapper.querySelector('.list4'); // 追加
57  
58  if (slide.classList.contains('slider1') === true) {
59    slide.classList.remove('slider1');
60    slide.classList.add('slider4');
61    list1.style.backgroundColor = 'transparent';
62    list4.style.backgroundColor = '#000';
63    count = 0;
64  } else if (slide.classList.contains('slider2') === true) {
65    slide.classList.remove('slider2');
66    slide.classList.add('slider1');
67    list2.style.backgroundColor = 'transparent';
68    list1.style.backgroundColor = '#000';
69    count = 0;
70  } else if (slide.classList.contains('slider3') === true) {
71    slide.classList.remove('slider3');
72    slide.classList.add('slider2');
73    list3.style.backgroundColor = 'transparent';
74    list2.style.backgroundColor = '#000';
75    count = 0;
76  } else {
77    slide.classList.remove('slider4');
78    slide.classList.add('slider3');
79    list4.style.backgroundColor = 'transparent';
80    list3.style.backgroundColor = '#000';
81    count = 0;
82  }
83}
84
85
86// インジケーター
87list1s.forEach(list => list.addEventListener('click', click1));
88list2s.forEach(list => list.addEventListener('click', click2));
89list3s.forEach(list => list.addEventListener('click', click3));
90list4s.forEach(list => list.addEventListener('click', click4));
91
92function click1(e) { // 引数追加
93  const sliderWrapper = e.target.closest('.wrapper'); // 追加
94  const slide = sliderWrapper.querySelector('.slider'); // 追加
95  
96  slide.classList.add('slider1');
97  slide.classList.remove('slider2');
98  slide.classList.remove('slider3');
99  slide.classList.remove('slider4');
100  sliderWrapper.querySelector('.list1').style.backgroundColor = '#000'; // 変更
101  sliderWrapper.querySelector('.list2').style.backgroundColor = 'transparent'; // 変更
102  sliderWrapper.querySelector('.list3').style.backgroundColor = 'transparent'; // 変更
103  sliderWrapper.querySelector('.list4').style.backgroundColor = 'transparent'; // 変更
104  count = 0;
105}
106
107function click2(e) { // 引数追加
108  const sliderWrapper = e.target.closest('.wrapper'); // 追加
109  const slide = sliderWrapper.querySelector('.slider'); // 追加
110  
111  slide.classList.remove('slider1');
112  slide.classList.add('slider2');
113  slide.classList.remove('slider3');
114  slide.classList.remove('slider4');
115  sliderWrapper.querySelector('.list1').style.backgroundColor = 'transparent'; // 変更
116  sliderWrapper.querySelector('.list2').style.backgroundColor = '#000'; // 変更
117  sliderWrapper.querySelector('.list3').style.backgroundColor = 'transparent'; // 変更
118  sliderWrapper.querySelector('.list4').style.backgroundColor = 'transparent'; // 変更
119  count = 0;
120}
121
122function click3(e) { // 引数追加
123  const sliderWrapper = e.target.closest('.wrapper'); // 追加
124  const slide = sliderWrapper.querySelector('.slider'); // 追加
125  
126  slide.classList.remove('slider1');
127  slide.classList.remove('slider2');
128  slide.classList.add('slider3');
129  slide.classList.remove('slider4');
130  sliderWrapper.querySelector('.list1').style.backgroundColor = 'transparent'; // 変更
131  sliderWrapper.querySelector('.list2').style.backgroundColor = 'transparent'; // 変更
132  sliderWrapper.querySelector('.list3').style.backgroundColor = '#000'; // 変更
133  sliderWrapper.querySelector('.list4').style.backgroundColor = 'transparent'; // 変更
134  count = 0;
135}
136
137function click4(e) { // 引数追加
138  const sliderWrapper = e.target.closest('.wrapper'); // 追加
139  const slide = sliderWrapper.querySelector('.slider'); // 追加
140  
141  slide.classList.remove('slider1');
142  slide.classList.remove('slider2');
143  slide.classList.remove('slider3');
144  slide.classList.add('slider4');
145  sliderWrapper.querySelector('.list1').style.backgroundColor = 'transparent'; // 変更
146  sliderWrapper.querySelector('.list2').style.backgroundColor = 'transparent'; // 変更
147  sliderWrapper.querySelector('.list3').style.backgroundColor = 'transparent'; // 変更
148  sliderWrapper.querySelector('.list4').style.backgroundColor = '#000'; // 変更
149  count = 0;
150}
151
152// 自動でスライダーが動く機能を削除したい場合は、以下のようにコードを削除する
153/* // 自動スライド
154var count = 0;
155
156setInterval(() => {
157  if (count > 4) {
158    count = 0;
159    nextClick();
160  }
161  count++;
162  // console.log(count);
163}, 1000); */

css
1/* 前略 */
2
3.list1 { /* idをclassに変更*/
4  background-color: #000;
5}

補足

とりあえず元のコードを生かす形での修正案をご紹介させていただきました。
しかし、見本にされているコードはかなり冗長的（無駄な記述が多く行数が多い）ですので、参考・使用されない方がいいと思います。

投稿2023/02/01 09:03

Cocode

総合スコア2316

aswedrftgyh

2023/02/01 09:25

実装できました！！！！ほんっとに助かりました！と共に自身の勉強不足を痛感しました、、簡潔かつ迅速な対応ありがとうございました！！！

Cocode

2023/02/01 11:29

よかったですー！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

同じ動きをする複数のスライダーを動かしたい

前提

該当のソースコード

仕組み

コード修正例

補足

関連した質問