JavaScriptを使用せずに1画面に複数枚のコンテンツが表示されるスライダーを実装したい。

実現したいこと

環境上JSを使用できない仕様になっているのですが、HTMLとCSSのみで前後に操作ボタン付きで1画面に複数枚のコンテンツが表示されるスライダーを実装したい。

発生している問題・分からないこと

HTMLとCSSのみで前後に操作ボタン付きのスライダーまで実装できたのですが、1枚ずつしか表示できず、複数枚のコンテンツを表示できるような仕様にできていません。
現状の実装：
理想：

該当のソースコード

HTML
1<div class="cosme">
2  <h1 class="cosme__ttl">この記事に登場したコスメ</h1>
3  <div class="carousel" aria-label="Gallery">
4    <ol class="carousel__viewport">
5      <li id="carousel__slide1" tabindex="0" class="carousel__slide">
6        <div class="carousel__snapper">
7          <a href="#"><!----> <!---->
8            <div><img
9                src="画像パス"></div>
10            <div class="CsmCard__summary_9ORs3">
11              <div>
12                <p class="g-subtitle4 CsmCard__brand_sUWYx"><!---->
13                  トランシーノ
14                </p>
15                <p class="g-subtitle3 CsmCard__name_4AauZ">
16                  薬用クリアクレンジングEX
17                </p> <!----> <!---->
18              </div>
19              <div class="CsmCard__footer_F-ied">
20                <div>
21                  <p class="CsmCard__capacityPrice_KlR3R">
22                    110g/￥1980
23                  </p> <!---->
24                </div>
25              </div>
26            </div>
27          </a>
28          <a href="#carousel__slide4" class="carousel__prev">Go to last slide</a>
29          <a href="#carousel__slide2" class="carousel__next">Go to next slide</a>
30        </div>
31      </li>
32      <li id="carousel__slide2" tabindex="0" class="carousel__slide">
33        <div class="carousel__snapper"></div>
34        <a href="#">
35          <div class="画像パス"></div>
36          <div class="CsmCard__summary_9ORs3">
37            <div>
38              <p class="g-subtitle4 CsmCard__brand_sUWYx"><!---->
39                トランシーノ
40              </p>
41              <p class="g-subtitle3 CsmCard__name_4AauZ">
42                薬用クリアクレンジングEX
43              </p> <!----> <!---->
44            </div>
45            <div class="CsmCard__footer_F-ied">
46              <div>
47                <p class="CsmCard__capacityPrice_KlR3R">
48                  110g/￥1980
49                </p> <!---->
50              </div>
51            </div>
52          </div>
53        </a>
54        <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a>
55        <a href="#carousel__slide3" class="carousel__next">Go to next slide</a>
56      </li>
57      <li id="carousel__slide3" tabindex="0" class="carousel__slide">
58        <div class="carousel__snapper"></div>
59        <a href="#"><!----> <!---->
60          <div><img
61              src="画像パス"></div>
62          <div class="CsmCard__summary_9ORs3">
63            <div>
64              <p class="g-subtitle4 CsmCard__brand_sUWYx"><!---->
65                トランシーノ
66              </p>
67              <p class="g-subtitle3 CsmCard__name_4AauZ">
68                薬用クリアクレンジングEX
69              </p> <!----> <!---->
70            </div>
71            <div class="CsmCard__footer_F-ied">
72              <div>
73                <p class="CsmCard__capacityPrice_KlR3R">
74                  110g/￥1980
75                </p> <!---->
76              </div>
77            </div>
78          </div>
79        </a>
80        <a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a>
81        <a href="#carousel__slide4" class="carousel__next">Go to next slide</a>
82      </li>
83      <li id="carousel__slide4" tabindex="0" class="carousel__slide">
84        <div class="carousel__snapper"></div>
85        <a href="#" class="CsmCard_5Iuoi">
86          <div class="画像パス"></div>
87          <div class="CsmCard__summary_9ORs3">
88            <div>
89              <p class="g-subtitle4 CsmCard__brand_sUWYx"><!---->
90                トランシーノ
91              </p>
92              <p class="g-subtitle3 CsmCard__name_4AauZ">
93                薬用クリアクレンジングEX
94              </p> <!----> <!---->
95            </div>
96            <div class="CsmCard__footer_F-ied">
97              <div>
98                <p class="CsmCard__capacityPrice_KlR3R">
99                  110g/￥1980
100                </p> <!---->
101              </div>
102            </div>
103          </div>
104        </a>
105        <a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a>
106        <a href="#carousel__slide1" class="carousel__next">Go to first slide</a>
107      </li>
108  </div>
109</div>

CSS
1    .cosme {
2      background: #f5f3f1;
3    }
4
5    .cosme__ttl {
6      font-size: 20px;
7      align-items: center;
8      display: flex;
9      justify-content: center;
10      padding: 15px 0;
11      margin: 0;
12    }
13
14    @keyframes snap {
15      96% {
16        scroll-snap-align: center;
17      }
18
19      97% {
20        scroll-snap-align: none;
21      }
22
23      99% {
24        scroll-snap-align: none;
25      }
26
27      100% {
28        scroll-snap-align: center;
29      }
30    }
31
32    body {
33      max-width: 37.5rem;
34      margin: 0 auto;
35      padding: 0 1.25rem;
36      font-family: 'Lato', sans-serif;
37    }
38
39    * {
40      box-sizing: border-box;
41      scrollbar-color: transparent transparent;
42      /* thumb and track color */
43      scrollbar-width: 0px;
44    }
45
46    *::-webkit-scrollbar {
47      width: 0;
48    }
49
50    *::-webkit-scrollbar-track {
51      background: transparent;
52    }
53
54    *::-webkit-scrollbar-thumb {
55      background: transparent;
56      border: none;
57    }
58
59    * {
60      -ms-overflow-style: none;
61    }
62
63    ol,
64    li {
65      list-style: none;
66      margin: 0;
67      padding: 0;
68    }
69
70    .carousel {
71      position: relative;
72      padding-top: 75%;
73      perspective: 100px;
74      margin: 0 auto;
75    }
76
77    .carousel__viewport {
78      position: absolute;
79      top: 0;
80      right: 0;
81      bottom: 0;
82      left: 0;
83      display: flex;
84      overflow-x: scroll;
85      counter-reset: item;
86      scroll-behavior: smooth;
87      scroll-snap-type: x mandatory;
88    }
89
90    .carousel__slide {
91      position: relative;
92      flex: 0 0 100%;
93      counter-increment: item;
94    }
95
96    .carousel__snapper {
97      position: absolute;
98      top: 0;
99      left: 0;
100      width: 100%;
101      height: 100%;
102      scroll-snap-align: center;
103    }
104
105    @media (hover: hover) {
106      .carousel__snapper {
107        animation-name: tonext, snap;
108        animation-timing-function: ease;
109        animation-duration: 4s;
110        animation-iteration-count: infinite;
111      }
112
113      .carousel__slide:last-child .carousel__snapper {
114        animation-name: tostart, snap;
115      }
116    }
117
118    @media (prefers-reduced-motion: reduce) {
119      .carousel__snapper {
120        animation-name: none;
121      }
122    }
123
124    .carousel:hover .carousel__snapper,
125    .carousel:focus-within .carousel__snapper {
126      animation-name: none;
127    }
128
129    .carousel__navigation {
130      position: absolute;
131      right: 0;
132      bottom: 0;
133      left: 0;
134      text-align: center;
135    }
136
137    .carousel__navigation-list,
138    .carousel__navigation-item {
139      display: inline-block;
140    }
141
142    .carousel__navigation-button {
143      display: inline-block;
144      width: 1.5rem;
145      height: 1.5rem;
146      background-color: #333;
147      background-clip: content-box;
148      border: 0.25rem solid transparent;
149      border-radius: 50%;
150      font-size: 0;
151      transition: transform 0.1s;
152    }
153
154    .carousel::before,
155    .carousel::after,
156    .carousel__prev,
157    .carousel__next {
158      position: absolute;
159      margin-top: 37.5%;
160      width: 2rem;
161      height: 2rem;
162      transform: translateY(-50%);
163      border-radius: 50%;
164      font-size: 0;
165      outline: 0;
166      position: absolute;
167      top: -5%;
168      transform: translateY(-50%);
169      -webkit-transform: translateY(-50%);
170      -ms-transform: translateY(-50%);
171    }
172
173    .carousel::before,
174    .carousel__prev {
175      left: 9rem;
176    }
177
178    .carousel::after,
179    .carousel__next {
180      right: 9rem;
181    }
182
183    .carousel::before,
184    .carousel::after {
185      content: "";
186      z-index: 1;
187      background-color: #333;
188      background-size: 1.5rem 1.5rem;
189      background-repeat: no-repeat;
190      background-position: center center;
191      color: #fff;
192      font-size: 2.5rem;
193      line-height: 4rem;
194      text-align: center;
195      pointer-events: none;
196    }
197    .CsmCard_5Iuoi {
198      background: #fff;
199      border: 1px solid hsla(0, 0%, 7%, .06);
200      border-radius: 8px;
201      box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .08);
202      color: inherit;
203      display: flex;
204      flex-flow: column;
205      padding: 10px;
206      position: relative;
207      width: 200px;
208      margin: 0 auto;
209    }
210
211    .Thumbnail_2aRly img {
212      height: 100%;
213      left: 0;
214      -o-object-fit: cover;
215      object-fit: cover;
216      top: 0;
217      width: 100%;
218    }
219
220    .Thumbnail_2aRly {
221      overflow: hidden;
222      position: relative;
223    }
224
225    .CsmCard__image_i10-u {
226      flex: 0 0 auto;
227      margin: 8px auto 4px;
228    }
229
230    .g-subtitle3 {
231      align-items: center;
232      color: rgba(18, 18, 18, 0.8);
233      display: flex;
234      margin-top: 2px;
235    }
236
237    .g-subtitle4 {
238      align-items: center;
239      color: hsla(0, 0%, 7%, .54);
240      display: flex;
241      margin: 2px;
242    }
243
244    .CsmCard__footer_F-ied {
245      color: hsla(0, 0%, 7%, .54);
246      align-items: center;
247      display: flex;
248      flex-flow: row nowrap;
249      gap: 4px;
250      justify-content: flex-start;
251      margin-top: auto;
252    }
253
254    .CsmCard__like_Hat65 {
255      margin-left: auto;
256    }

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

現状1つのコンテンツごとに前後の操作ボタンを実装してしまっているため、操作ボタンのコードを1つにまとめられれば、実装できるのでは無いかと思っております。

補足

特になし

yambejp

2024/02/28 09:09

jsはダメなのにキーフレームアニメはOKなのでしょうか？

leomessi

2024/02/28 09:30

HTMLとCSSは使用できますので、キーフレームアニメは使用できます。

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

回答2件

ベストアンサー

紆余曲折してみました

CSS
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
2<style>
3.wrap{
4  flex-shrink: 0;
5  width:100px;
6  margin-left:25px;
7  height:100px;
8  background-Color:yellow;
9}
10.container{
11  background-Color:gray;
12  width:150px;
13  overflow:hidden;
14  display:flex;
15  justify-content:space-between;
16  align-items:center;
17}
18[name=r]{display:none;}
19
20:root{
21  --offset:-125px;
22}
23.container:has(#c1l:checked) .wrap{--from:1; --to:0; transform:translate(calc(var(--offset) * var(--to)));animation:slide1 1s; }
24.container:has(#c2l:checked) .wrap{--from:2; --to:1; transform:translate(calc(var(--offset) * var(--to)));animation:slide2 1s; }
25.container:has(#c3l:checked) .wrap{--from:3; --to:2; transform:translate(calc(var(--offset) * var(--to)));animation:slide3 1s; }
26.container:has(#c4l:checked) .wrap{--from:0; --to:3; transform:translate(calc(var(--offset) * var(--to)));animation:slide4 1s; }
27
28.container:has(#c1r:checked) .wrap{--from:3;--to:0;transform:translate(calc(var(--offset) * var(--to)));animation:slide1 1s;}
29.container:has(#c2r:checked) .wrap{--from:0;--to:1;transform:translate(calc(var(--offset) * var(--to)));animation:slide2 1s;}
30.container:has(#c3r:checked) .wrap{--from:1;--to:2;transform:translate(calc(var(--offset) * var(--to)));animation:slide3 1s;}
31.container:has(#c4r:checked) .wrap{--from:2;--to:3;transform:translate(calc(var(--offset) * var(--to)));animation:slide4 1s;}
32
33@keyframes slide{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}}
34@keyframes slide1{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}}
35@keyframes slide2{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}}
36@keyframes slide3{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}}
37@keyframes slide4{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}}
38
39.container:not(:has(:checked)) ~ * nav label:not(:nth-child(1)),
40.container:has(#c1l:checked) ~ * nav label:not(:nth-child(1)),
41.container:has(#c1r:checked) ~ * nav label:not(:nth-child(1)),
42.container:has(#c2l:checked) ~ * nav label:not(:nth-child(2)),
43.container:has(#c2r:checked) ~ * nav label:not(:nth-child(2)),
44.container:has(#c3l:checked) ~ * nav label:not(:nth-child(3)),
45.container:has(#c3r:checked) ~ * nav label:not(:nth-child(3)),
46.container:has(#c4l:checked) ~ * nav label:not(:nth-child(4)),
47.container:has(#c4r:checked) ~ * nav label:not(:nth-child(4))
48{ display:none; }* 
49</style>
50<div class="container">
51<div class="wrap">
52<input type="radio" name="r" id="c1l">
53<input type="radio" name="r" id="c1r">
54<span>a</span>
55</div>
56<div class="wrap">
57<input type="radio" name="r" id="c2l">
58<input type="radio" name="r" id="c2r">
59<span>b</span>
60</div>
61<div class="wrap">
62<input type="radio" name="r" id="c3l">
63<input type="radio" name="r" id="c3r">
64<span>c</span>
65</div>
66<div class="wrap">
67<input type="radio" name="r" id="c4l">
68<input type="radio" name="r" id="c4r">
69<span>d</span>
70</div>
71</div>
72<div class="container">
73<nav class="left">
74<label for="c4l"><i class="fa-solid fa-circle-chevron-left"></i></label>
75<label for="c1l"><i class="fa-solid fa-circle-chevron-left"></i></label>
76<label for="c2l"><i class="fa-solid fa-circle-chevron-left"></i></label>
77<label for="c3l"><i class="fa-solid fa-circle-chevron-left"></i></label>
78</nav>
79<nav class="right">
80<label for="c2r"><i class="fa-solid fa-circle-chevron-right"></i></label>
81<label for="c3r"><i class="fa-solid fa-circle-chevron-right"></i></label>
82<label for="c4r"><i class="fa-solid fa-circle-chevron-right"></i></label>
83<label for="c1r"><i class="fa-solid fa-circle-chevron-right"></i></label>
84</nav>
85</div>

codepen サンプル

投稿2024/02/29 12:33

編集2024/02/29 12:39

yambejp

総合スコア115892

なんかいろいろ触ってたらどこを変えたのかわからなくなってしまいましたので、とりあえず全部提示します。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/jh85py67/

なお、自動スライダーの部分は触っていませんので、よろしくお願いします。

html
1.cosme {
2    background: #f5f3f1;
3}
4
5.cosme__ttl {
6    font-size: 20px;
7    align-items: center;
8    display: flex;
9    justify-content: center;
10    padding: 15px 0;
11    margin: 0;
12}
13
14@keyframes snap {
15    96% {
16        scroll-snap-align: center;
17    }
18
19    97% {
20        scroll-snap-align: none;
21    }
22
23    99% {
24        scroll-snap-align: none;
25    }
26
27    100% {
28        scroll-snap-align: center;
29    }
30}
31
32body {
33    max-width: 37.5rem;
34    margin: 0 auto;
35    padding: 0 1.25rem;
36    font-family: 'Lato', sans-serif;
37}
38
39* {
40    box-sizing: border-box;
41    scrollbar-color: transparent transparent;
42    /* thumb and track color */
43    scrollbar-width: 0px;
44}
45
46*::-webkit-scrollbar {
47    width: 0;
48}
49
50*::-webkit-scrollbar-track {
51    background: transparent;
52}
53
54*::-webkit-scrollbar-thumb {
55    background: transparent;
56    border: none;
57}
58
59* {
60    -ms-overflow-style: none;
61}
62
63ol,
64li {
65    list-style: none;
66    margin: 0;
67    padding: 0;
68}
69
70.carousel {
71    /* position: relative;
72    padding-top: 75%; */
73    aspect-ratio: 4 / 3;
74    perspective: 100px;
75    margin: 0 auto;
76}
77
78.carousel__viewport {
79    /* position: absolute;
80    top: 0;
81    right: 0;
82    bottom: 0;
83    left: 0; */
84    height: 100%;
85    display: flex;
86    overflow-x: scroll;
87    counter-reset: item;
88    scroll-behavior: smooth;
89    scroll-snap-type: x mandatory;
90}
91
92.carousel__slide {
93    /* position: relative; */
94    /* flex: 0 0 100%; */
95    flex: 0 0 50%;
96    counter-increment: item;
97    display: grid;
98    grid-template-areas: "a";
99
100    & a:nth-child(2) {
101        grid-area: a;
102    }
103}
104
105.carousel__snapper {
106    /* position: absolute;
107    top: 0;
108    left: 0; */
109    width: 100%;
110    height: 100%;
111    scroll-snap-align: center;
112    scroll-snap-align: none;
113    grid-area: a;
114}
115
116:target .carousel__snapper {
117    scroll-snap-align: start;
118}
119
120
121@media (hover: hover) {
122    .carousel__snapper {
123        animation-name: tonext, snap;
124        animation-timing-function: ease;
125        animation-duration: 4s;
126        animation-iteration-count: infinite;
127    }
128
129    .carousel__slide:last-child .carousel__snapper {
130        animation-name: tostart, snap;
131    }
132}
133
134@media (prefers-reduced-motion: reduce) {
135    .carousel__snapper {
136        animation-name: none;
137    }
138}
139
140.carousel:hover .carousel__snapper,
141.carousel:focus-within .carousel__snapper {
142    animation-name: none;
143}
144
145.carousel__navigation {
146    position: absolute;
147    right: 0;
148    bottom: 0;
149    left: 0;
150    text-align: center;
151}
152
153.carousel__navigation-list,
154.carousel__navigation-item {
155    display: inline-block;
156}
157
158.carousel__navigation-button {
159    display: inline-block;
160    width: 1.5rem;
161    height: 1.5rem;
162    background-color: #333;
163    background-clip: content-box;
164    border: 0.25rem solid transparent;
165    border-radius: 50%;
166    font-size: 0;
167    transition: transform 0.1s;
168}
169
170.carousel::before,
171.carousel::after,
172.carousel__prev,
173.carousel__next {
174    position: absolute;
175    margin-top: 37.5%;
176    width: 2rem;
177    height: 2rem;
178    transform: translateY(-50%);
179    border-radius: 50%;
180    font-size: 0;
181    outline: 0;
182    position: absolute;
183    top: -5%;
184    transform: translateY(-50%);
185    -webkit-transform: translateY(-50%);
186    -ms-transform: translateY(-50%);
187}
188
189:target :where(.carousel__prev, .carousel__next) {
190    z-index: 999;
191}
192
193.carousel::before,
194.carousel__prev {
195    left: 9rem;
196}
197
198.carousel::after,
199.carousel__next {
200    right: 9rem;
201}
202
203.carousel::before,
204.carousel::after {
205    content: "";
206    z-index: 1;
207    background-color: #333;
208    background-size: 1.5rem 1.5rem;
209    background-repeat: no-repeat;
210    background-position: center center;
211    color: #fff;
212    font-size: 2.5rem;
213    line-height: 4rem;
214    text-align: center;
215    pointer-events: none;
216}
217
218.CsmCard_5Iuoi {
219    background: #fff;
220    border: 1px solid hsla(0, 0%, 7%, .06);
221    border-radius: 8px;
222    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .08);
223    color: inherit;
224    display: flex;
225    flex-flow: column;
226    padding: 10px;
227    position: relative;
228    width: 200px;
229    margin: 0 auto;
230}
231
232.Thumbnail_2aRly img {
233    height: 100%;
234    left: 0;
235    -o-object-fit: cover;
236    object-fit: cover;
237    top: 0;
238    width: 100%;
239}
240
241.Thumbnail_2aRly {
242    overflow: hidden;
243    position: relative;
244}
245
246.CsmCard__image_i10-u {
247    flex: 0 0 auto;
248    margin: 8px auto 4px;
249}
250
251.g-subtitle3 {
252    align-items: center;
253    color: rgba(18, 18, 18, 0.8);
254    display: flex;
255    margin-top: 2px;
256}
257
258.g-subtitle4 {
259    align-items: center;
260    color: hsla(0, 0%, 7%, .54);
261    display: flex;
262    margin: 2px;
263}
264
265.CsmCard__footer_F-ied {
266    color: hsla(0, 0%, 7%, .54);
267    align-items: center;
268    display: flex;
269    flex-flow: row nowrap;
270    gap: 4px;
271    justify-content: flex-start;
272    margin-top: auto;
273}
274
275.CsmCard__like_Hat65 {
276    margin-left: auto;
277}