前提・実現したいこと

JavaScriptでカルーセルパネルを作成しています。
現在画像を4枚で作成していますが、「slick.js」やjQueryを利用せずループするようにしたいです。

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

4枚目以降になった場合1～4の画像を1度きりであれば複製出来るが複製してループするようにしたいが出来ない。

該当のソースコード

html
1<body>
2  <div class="ly_wrap">
3    <div class="ly_img_wrap">
4      <ul>
5        <li><img src="img/photo01.png" alt="sample画像01"></li>
6        <li><img src="img/photo02.png" alt="sample画像02"></li>
7        <li><img src="img/photo03.png" alt="sample画像03"></li>
8        <li><img src="img/photo04.png" alt="sample画像04"></li>
9      </ul>
10    </div>
11    <!-- /.ly_img_wrap -->
12    <p class="prev img_button">&lt;</p>
13    <!-- /.plev -->
14    <p class="next img_button">&gt;</p>
15    <!-- /.next -->
16  </div>
17  <!-- /.ly_wrap -->
18  <script src="main.js"></script>
19</body>

css
1@charset "UTF-8";
2
3.ly_wrap {
4  width: 300px;
5  margin: 10px auto;
6  position: relative;
7}
8
9.ly_img_wrap {
10  display: flex;
11  overflow: hidden;
12  scroll-behavior: smooth;
13}
14
15.ly_img_wrap ul {
16  list-style: none;
17  display: flex;
18  margin: 0;
19  padding: 0;
20}
21
22.ly_img_wrap img {
23  width: 300px;
24  vertical-align: bottom;
25}
26
27.img_button {
28  font-size: 10px;
29  width: 25px;
30  height: 25px;
31  line-height: 25px;
32  text-align: center;
33  color: rgb(240, 240, 240);
34  background: rgb(200, 200, 200, 0.7);
35  border-radius: 50%;
36  cursor: pointer;
37  user-select: none;
38  position: absolute;
39  top: 72px;
40}
41
42.prev {
43  left: 5px;
44}
45
46.next {
47  right: 5px;
48}

javascript
1'use strict';
2
3const imgWrap = document.querySelector('.ly_img_wrap');
4
5const prev = document.querySelector('.prev');
6const next = document.querySelector('.next');
7
8prev.addEventListener('click', ()=>{
9  imgWrap.scrollLeft -= 300;
10});
11
12next.addEventListener('click', ()=>{
13  imgWrap.scrollLeft += 300;
14});
15

試したこと

その1

javascript
1const ul = document.querySelector('.ly_img_wrap ul');
2const copy = ul.cloneNode(true);
3imgWrap.insertBefore(copy, null);

cloneNodeを利用し1回の複製は出来ましたがループするような動きには程遠い状態です。
insertBeforeを利用し後（右側）に追加は出来ますが、前（左側）に追加が出来ない状態です。

その2
appendとprependメソッドを試しましたが希望通りにはならず、cloneNodeと同じように1回の複製でしかも前に要素が追加されませんでした。

つたない説明で申し訳ありませんがご教授お願い致します。

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

端末：Windows10 Home
テキストエディタ：VS Code
ブラウザ：Chrome

yambejp

2021/07/13 08:40

スリックしなくても大丈夫ですか？スライドイン・アウトは必要ですか？見栄えを調整するならライブラリが有利だと思いますが・・・

m_miura1980

2021/07/13 08:46

ご返信ありがとうございます。 <p class="prev img_button"><</p>と<p class="next img_button">></p>をクリックして進んでいった際に希望の状態にしていきたいと考えています。現段階でスライドイン・アウトは一旦不要と考えています。操作で確認しライブラリが調整簡単なのですが、実装環境がライブラリの組み込みが難しい為ライブラリが無い状態で実装できれば幸いです。