js スライダーの画像をボタンで切り替えるようにしたい

li class="option"とimgのインデックス番号を紐づけて切り替えるようにしたいのですが、やり方が分かりません。
どなたかにご教授頂きたいです。よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Slideshow</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <div class="container">
10    <main>
11      <div class="img-container">
12      <img id="main">
13    </div>
14      <nav>
15        <ul>
16          <li id="prev">&lt;</li>
17          <li id="next">&gt;</li>
18        </ul>
19      </nav>
20      <ul class="thumbnails"></ul>
21      <ul class="circle">
22				<li class="option" op-index="0"></li>
23				<li class="option" op-index="1"></li>
24				<li class="option" op-index="2"></li>
25				<li class="option" op-index="3"></li>
26				<li class="option" op-index="4"></li>
27			</ul>
28    </main>
29  </div>
30  <script src="main.js"></script>
31</body>
32</html>

css
1.container{
2  max-width: 500px;
3  margin: 180px auto 0 auto;
4}
5
6main {
7    position: relative;
8    width: 100%;
9    margin: 0 auto;
10  }
11  
12  img {
13    vertical-align: bottom;
14  }
15  
16  ul {
17    list-style: none;
18    padding: 0;
19    margin: 0;
20  }
21  
22  #main {
23    width: 100%;
24    height: auto;
25    max-height: 300px;
26    margin-bottom: 8px;
27    }
28  
29  nav {
30    width: 100%;
31    position: absolute;
32    top: 30%;
33    margin-bottom: 8px;
34  }
35  
36  nav ul {
37    display: flex;
38    justify-content: space-between;
39  }
40  
41  nav li {
42    font-size: 30px;
43    padding: 4px;
44    color: #ffffff;
45    text-align: center;
46    cursor: pointer;
47    user-select: none;
48  }
49  
50  #next,
51  #prev {
52    width: 60px;
53  }
54  
55  .thumbnails {
56    display: grid;
57    grid-template-columns: repeat(5, 56px);
58    gap: 5px;
59  }
60  
61  .thumbnails li {
62    cursor: pointer;
63    opacity: 0.4;
64  }
65  
66  .thumbnails li:hover,
67  .thumbnails li.current {
68    opacity: 1;
69  }
70  
71  .thumbnails img {
72    width: 56px;
73    height: 50px;
74  }
75
76  .circle{
77    position: absolute;
78    list-style: none;
79    display: flex;
80    bottom: 2%;
81    top: 101%;
82    left: 50%;
83    transform: translateX(-50%);
84  }
85  
86   .option{
87    margin: .3rem;
88    width: 18px;
89    height: 18px;
90    border-radius: 50%;
91    border: 2.5px solid #2ecc71;
92    cursor: pointer;
93  }
94  
95  .option .colored{
96    background-color: #2ecc71;
97  }

javascript
1{
2    const images = [
3      'img/cat/2600947_s.jpg',
4      'img/cat/2989325_s.jpg',
5      'img/cat/3051218_s.jpg',
6      'img/cat/3152425_s.jpg',
7      'img/cat/3272463_s.jpg'
8    ];
9    let currentIndex = 0;
10  
11    const mainImage = document.getElementById('main');
12    mainImage.src = images[currentIndex];//srcにセットする
13  
14    images.forEach((image, index) => {
15      const img = document.createElement('img');
16      img.src = image;
17  
18      const li = document.createElement('li');
19      if (index === currentIndex) {
20        li.classList.add('current');
21      }
22      li.addEventListener('click', () => {
23        mainImage.src = image;
24        const thumbnails = document.querySelectorAll('.thumbnails > li');
25        thumbnails[currentIndex].classList.remove('current');
26        currentIndex = index;
27        thumbnails[currentIndex].classList.add('current');
28      });
29  
30      li.appendChild(img);
31      document.querySelector('.thumbnails').appendChild(li);
32    });
33  
34    const next = document.getElementById('next');
35    next.addEventListener('click', () => {
36      let target = currentIndex + 1;
37      if (target === images.length) {
38        target = 0;
39      }
40      document.querySelectorAll('.thumbnails > li')[target].click();
41    });
42  
43    const prev = document.getElementById('prev');
44    prev.addEventListener('click', () => {
45      let target = currentIndex - 1;
46      if (target < 0) {
47        target = images.length - 1;
48        console.log(target)
49      }
50      document.querySelectorAll('.thumbnails > li')[target].click();
51    });
52
53  }

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

回答1件

ベストアンサー

下のような感じで出来るかもしれません。

Javascript
1{
2    const images = [
3        'img/cat/2600947_s.jpg',
4        'img/cat/2989325_s.jpg',
5        'img/cat/3051218_s.jpg',
6        'img/cat/3152425_s.jpg',
7        'img/cat/3272463_s.jpg'
8    ];
9    let currentIndex = 0;
10
11    const mainImage = document.getElementById("main");
12    mainImage.src = images[currentIndex]; //srcにセットする
13
14    //すべてのボタンを取得
15    const buttons = document.querySelectorAll(".circle > li");
16    images.forEach((image, index) => {
17        const img = document.createElement("img");
18        img.src = image;
19
20        const li = document.createElement("li");
21        if (index === currentIndex) {
22            li.classList.add("current");
23            //ボタンにcurrentクラスを追加
24            buttons[index].classList.add("current");
25        }
26        li.addEventListener("click", () => {
27            mainImage.src = image;
28            const thumbnails = document.querySelectorAll(".thumbnails > li");
29            thumbnails[currentIndex].classList.remove("current");
30            //現在currentのクラスが付いているボタンからcurrentの削除
31            buttons[currentIndex].classList.remove("current");
32            currentIndex = index;
33            thumbnails[currentIndex].classList.add("current");
34            //クリックしたボタンにcurrentのクラスを追加
35            buttons[currentIndex].classList.add("current");
36        });
37
38        li.appendChild(img);
39        document.querySelector(".thumbnails").appendChild(li);
40
41        //ボタンにクリックのイベントを追加
42        const button = buttons[index];
43        if (button) {
44            button.addEventListener("click", () => {
45                document.querySelectorAll(".thumbnails > li")[index].click();
46            });
47        }
48    });
49
50    const next = document.getElementById("next");
51    next.addEventListener("click", () => {
52        let target = currentIndex + 1;
53        if (target === images.length) {
54            target = 0;
55        }
56        document.querySelectorAll(".thumbnails > li")[target].click();
57    });
58
59    const prev = document.getElementById("prev");
60    prev.addEventListener("click", () => {
61        let target = currentIndex - 1;
62        if (target < 0) {
63            target = images.length - 1;
64            console.log(target);
65        }
66        document.querySelectorAll(".thumbnails > li")[target].click();
67    });
68}

以下のCSSを追加すれば、選択しているボタンの色が変わります。

CSS
1.option.current {
2    border-color: gray;
3}

投稿2020/06/06 20:54

fake_shibe

総合スコア806

masaya9460

2020/06/07 06:12

ありがとうございます！解決できました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

js スライダーの画像をボタンで切り替えるようにしたい

関連した質問