スライドショーする画像をの横幅をウインドウの幅にピッタリ合わせたいです。

企業のHPのTOP画面にあるような、画像をスライドショーさせるコードを書いているのですが、画像がスライドショーするとき、各画像の横幅がウインドウの幅ピッタリに表示させたいのですが上手くいきません。
.slide-item {width: 600px;}を500pxに変更すると、モバイル500pxピッタリの画面では各画像５枚とも幅は合いますが、モバイル380pxの幅の時などの画面の場合もスライドショーする各画像の横幅をウインドウの幅に合わせたいです。

回答よろしくお願いいたします。
下のコードは画像5枚をCSSアニメーションでスライドショーするコードになります。

html
1<div id="css-slider">
2    <div class="slider-wrapper">
3      <div class="slide-item">
4        <img src="officelyrics/office1.png" class="ex" alt="ひよこ" >
5      </div>
6      <div class="slide-item">
7        <img src="officelyrics/hptop2.png" class="ex" alt="ひよこ" >
8      </div>
9      <div class="slide-item">
10        <img src="officelyrics/24736572_m.png" class="ex" alt="ひよこ" >
11      </div>
12      <div class="slide-item">
13        <img src="officelyrics/1c.png" class="ex" alt="ひよこ" >
14      </div>
15      <div class="slide-item">
16        <img src="officelyrics/HP6b.png" class="ex" alt="ひよこ" >
17      </div>
18    </div>
19  </div>

css
1@media screen and (max-width: 500px) {
2
3 #css-slider {
4	width: 100%;/* スライド自体の合計の長さ*/
5	height: 200px;
6	overflow: hidden;
7}
8
9.slide-item {
10	width: 600px;
11	height: 200px;
12	float: left;
13	position: relative;
14}
15
16
17.slider-wrapper {
18	width: 500%;/* 画像をスライドさせる枚数500%なら5枚スライド*/
19	position: relative;
20	left: 0;
21	will-change: transform;
22	animation: slider 20s infinite;
23}
24
25
26
27@keyframes slider {
28  0% { transform: translateX(0%); }
29  7% { transform: translateX(-7%); }
30  14% { transform: translateX(-14%); }
31  20% { transform: translateX(-20%); }
32
33  27% { transform: translateX(-27%); }
34  34% { transform: translateX(-34%); }
35  40% { transform: translateX(-40%); }
36
37  47% { transform: translateX(-47%); }
38  54% { transform: translateX(-54%); }
39  60% { transform: translateX(-60%); }
40
41  67% { transform: translateX(-67%); }
42  74% { transform: translateX(-74%); }
43  80% { transform: translateX(-80%); }
44
45  87% { transform: translateX(-87%); }
46  94% { transform: translateX(-94%); }
47  100% { transform: translateX(0%); }
48
49}
50
51.ex{
52  width: 100%;
53}

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

回答1件

ベストアンサー

スライド画像(.slide-item)が５枚なので、その幅を親要素(.slider-wrapper)の幅の1/5(20%)に設定すればいいでしょう。

css
1 #css-slider {
2	width: 100%;/* スライド自体の幅を画面幅に*/
3	height: 200px;
4	overflow: hidden;
5}
6
7.slide-item {
8	width: 20%; /* 親要素の1/5の幅 */
9	height: 200px;
10	float: left;
11	position: relative;
12}
13
14.slider-wrapper {
15	width: 500%;/* 画像をスライドさせる枚数500%なら5枚スライド*/
16	position: relative;
17	left: 0;
18	will-change: transform;
19	animation: slider 20s infinite;
20}