JavaScriptでスライダー作成、自動スライドと、画像を3枚表示

ライブラリを使わず、JSでスライダーを作成しようと思っています。

やりたいこと

~~自動スライド（2秒ごと）~~
画像を3枚表示（両端の画像は半分表示で見切れさせる）

仕組み

かんたんに以下仕組みになります。

liタグ取得
for文でli要素をループ
JSでcss操作し、leftなどとして横移動
スライド関数実行（setinterval）

悩んでいること

画像スライド時の重なり
添付しているコードあくまでローカル確認用になります
他ファイルに組み込んだ際、横スライドが実現できず、スライドした画像が上に重なってしまいます。
slickなどのように、画像が水平移動するのが理想なのですが、こちら.style.lefなどの指定が問題でしょうか。
代替案あれば教えていただけますでしょうか。

画像を3枚表示（両端の画像は半分表示で見切れさせる）
計6枚画像があるとして、最後の画像（6枚目）を、1の画像の前に表示させたいです。
以下のような形にする場合は、cssで操作するのでしょうか。

jQueryなどのライブラリだとよく見かけるのですが、JSで作成する方法がわからずにいます。

以下の参考サイトの「画像スライダー」にそって進めました。
https://blog.kannart.co.jp/coding/1199/#slide

// 次のスライドを現在のスライドの進行方向後ろに移動させる

のsetTimeout部分を書き換える必要がありそう？な気がしているのですが、100%コードの意味を把握できていない状況です。

デバックの様子です。

画像が1枚目

![]

画像が1枚目消える

画像が2枚目が表示される

html
1<div class="container">
2    <div class="wrap">
3      <ul class="slide-list">
4        <li class="slide-list-item"><img src="https://placehold.jp/400x200.png" alt=""></li>
5        <li class="slide-list-item"><img src="http://placehold.jp/24/cc9999/993333/400x200.png"" alt=""></li>
6        <li class=" slide-list-item"><img src="https://placehold.jp/400x200.png" alt=""></li>
7        <li class="slide-list-item"><img src="http://placehold.jp/24/cc9999/993333/400x200.png"" alt=""></li>
8      </ul>
9    </div>
10  </div>
11  <script src=" ./index.js"></script>

css
1.container {
2  width: 400px;
3  margin: 0 auto;
4  padding: 50px 0;
5}
6.wrap {
7  position: relative;
8  width: 400px;
9  margin: 0 auto;
10}
11.slide-list {
12  position: relative;
13  width: auto;
14  height: 200px;
15  overflow: hidden;
16  margin: 0 auto;
17}
18.slide-list-item {
19  position: absolute;
20  top: 0;
21  left: 0;
22  width: 400px;
23}

javascript
1var slideItems,
2  slideItemWidth,
3  slidePrev,
4  slideNext,
5  slideItemNum,
6  slideCurrent;
7
8// マッチしたid・class名を持つ要素を取得、変数の定義
9slideItems = document.querySelectorAll('.slide-list-item');
10slideItemWidth = document.querySelectorAll('.slide-list-item')[0].clientWidth;
11console.log(slideItemWidth);
12slideItemNum = 0;
13slideCurrent = 0;
14
15// スライド表示位置やスライドの初期表示
16for (var i = 0; i < slideItems.length; i++) {
17  slideItems[i].style.left = slideItemWidth + 'px';
18  if (slideItemNum === slideCurrent) {
19    slideItems[i].style.left = 0 + 'px';
20  }
21  slideItemNum++;
22}
23
24setInterval(() => {
25  slide(slideCurrent + 1);
26}, 2000);
27
28// スライド関数
29function slide(next) {
30  // 現在のスライドの値と次のスライドの値を比較し、positionで調整
31  var pos;
32
33  if (slideCurrent < next) {
34    pos = -slideItemWidth;
35  } else {
36    pos = slideItemWidth;
37  }
38  // 最初に戻る
39  if (next === slideItemNum) {
40    next = 0;
41  } else if (next === -1) {
42    next = (slideItemNum - 1);
43  }
44  // 最後に戻る
45
46  for (var i = 0; i < slideItems.length; i++) {
47    slideItems[i].style.transition = 'initial';
48  }
49  // 次のスライドを現在のスライドの進行方向後ろに移動させる
50  slideItems[next].style.left = -pos + 'px';
51  setTimeout(function () {
52    slideItems[next].style.transition = 'all 0.5s';
53    slideItems[next].style.left = 0 + 'px';
54  }, 30);
55  slideItems[slideCurrent].style.transition = 'all 0.5s';
56  slideItems[slideCurrent].style.left = pos + 'px';
57
58  slideCurrent = next;
59}
60

よろしくお願いします。

Lhankor_Mhy

2021/02/09 01:46

補足願います。・「他ファイルに組み込んだ際、横スライドが実現できず、スライドした画像が上に重なってしまいます。」とのことですが、再現するコードをご提示ください。・「両端の画像は半分表示で見切れさせる」とのことですが、「以下のような形」では半分に見切れていないようです。画像は無視してかまいませんか？

roronoazoro

2021/02/09 01:51 編集

ご回答ありがとうございます。 > 「他ファイルに組み込んだ際、横スライドが実現できず、スライドした画像が上に重なってしまいます。」とのことですが、再現するコードをご提示ください。失礼しました、再現がうまくできず先に質問させていただきました。いま一度試ししてみます。 >「両端の画像は半分表示で見切れさせる」とのことですが、「以下のような形」では半分に見切れていないようです。画像は無視してかまいませんか？紛らわしく失礼しました。参考で見切れてるものがなく近い形のものを引用いたしました。無視で問題ありません、よろしくお願いいたします。

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

回答1件

ベストアンサー

スクリプトが１行で済む時代なのね

js
1<!DOCTYPE html><html>
2<head><meta charset="UTF-8">
3<title></title>
4<style>
5div {
6  width: 800px;
7  height: 200px;
8  overflow: hidden;
9  margin: 0 auto;
10}
11
12ul {
13  white-space: nowrap;
14  list-style: none;
15  padding: 0;
16  margin: 0;
17}
18ul li {
19  display: inline-block;
20  width: 400px;
21  height: 200px;
22  margin: 0;
23  padding: 0;
24}
25
26li:first-of-type {
27  animation-name: expansion;
28  animation-duration: 2s;
29  animation-timing-function:ease;
30  animation-delay: 2s;
31  animation-iteration-count: 1;
32  animation-direction: normal;
33  animation-fill-mode: backwards;
34  animation-play-state: running;  
35}
36
37@keyframes expansion{
38  0% { margin-left:-200px; }
39  100% { margin-left:-600px; }
40}
41
42</style>
43
44<body>
45<div>
46  <ul>
47    <li><img src="https://placehold.jp/400x200.png" alt="">
48    <li><img src="http://placehold.jp/24/cc9999/993333/400x200.png" alt="">
49    <li><img src="https://placehold.jp/400x200.png" alt="">
50    <li><img src="http://placehold.jp/24/cc9999/993333/400x200.png" alt="">
51    <li>WHAT's NEW! ^^; WHAT's NEW! ^^; WHAT's NEW! ^^;
52  </ul>
53</div>
54
55<script>
56document.querySelector ('ul')
57  .addEventListener ('animationend',
58    ({target: e})=> e.parentNode.appendChild (e), false);
59</script>
60
61