html css card carousel

1<!-- HTML
2________________________________________________________________________________-->
3  <section class="carousel" aria-label="Gallery">
4  <ol class="carousel__viewport">
5    <li id="carousel__slide1"
6        tabindex="0"
7        class="carousel__slide">
8      <div class="carousel__snapper">
9        <a href="#carousel__slide4"
10           class="carousel__prev">Go to last slide</a>
11        <a href="#carousel__slide2"
12           class="carousel__next">Go to next slide</a>
13      </div>
14    </li>
15    <li id="carousel__slide2"
16        tabindex="0"
17        class="carousel__slide">
18      <div class="carousel__snapper"></div>
19      <a href="#carousel__slide1"
20         class="carousel__prev">Go to previous slide</a>
21      <a href="#carousel__slide3"
22         class="carousel__next">Go to next slide</a>
23    </li>
24    <li id="carousel__slide3"
25        tabindex="0"
26        class="carousel__slide">
27      <div class="carousel__snapper"></div>
28      <a href="#carousel__slide2"
29         class="carousel__prev">Go to previous slide</a>
30      <a href="#carousel__slide4"
31         class="carousel__next">Go to next slide</a>
32    </li>
33    <li id="carousel__slide4"
34        tabindex="0"
35        class="carousel__slide">
36      <div class="carousel__snapper"></div>
37      <a href="#carousel__slide3"
38         class="carousel__prev">Go to previous slide</a>
39      <a href="#carousel__slide1"
40         class="carousel__next">Go to first slide</a>
41    </li>
42  </ol>
43  <aside class="carousel__navigation">
44    <ol class="carousel__navigation-list">
45      <li class="carousel__navigation-item">
46        <a href="#carousel__slide1"
47           class="carousel__navigation-button">Go to slide 1</a>
48      </li>
49      <li class="carousel__navigation-item">
50        <a href="#carousel__slide2"
51           class="carousel__navigation-button">Go to slide 2</a>
52      </li>
53      <li class="carousel__navigation-item">
54        <a href="#carousel__slide3"
55           class="carousel__navigation-button">Go to slide 3</a>
56      </li>
57      <li class="carousel__navigation-item">
58        <a href="#carousel__slide4"
59           class="carousel__navigation-button">Go to slide 4</a>
60      </li>
61    </ol>
62  </aside>
63</section>
64
65CSS portion is is another answer because there is an issue saving CSS and HTML together.

1/*CSS
2________________________________________________________________________________*/
3@keyframes tonext {
4  75% {
5    left: 0;
6  }
7  95% {
8    left: 100%;
9  }
10  98% {
11    left: 100%;
12  }
13  99% {
14    left: 0;
15  }
16}
17
18@keyframes tostart {
19  75% {
20    left: 0;
21  }
22  95% {
23    left: -300%;
24  }
25  98% {
26    left: -300%;
27  }
28  99% {
29    left: 0;
30  }
31}
32
33@keyframes snap {
34  96% {
35    scroll-snap-align: center;
36  }
37  97% {
38    scroll-snap-align: none;
39  }
40  99% {
41    scroll-snap-align: none;
42  }
43  100% {
44    scroll-snap-align: center;
45  }
46}
47
48body {
49  max-width: 37.5rem;
50  margin: 0 auto;
51  padding: 0 1.25rem;
52  font-family: 'Lato', sans-serif;
53}
54
55* {
56  box-sizing: border-box;
57  scrollbar-color: transparent transparent; /* thumb and track color */
58  scrollbar-width: 0px;
59}
60
61*::-webkit-scrollbar {
62  width: 0;
63}
64
65*::-webkit-scrollbar-track {
66  background: transparent;
67}
68
69*::-webkit-scrollbar-thumb {
70  background: transparent;
71  border: none;
72}
73
74* {
75  -ms-overflow-style: none;
76}
77
78ol, li {
79  list-style: none;
80  margin: 0;
81  padding: 0;
82}
83
84.carousel {
85  position: relative;
86  padding-top: 75%;
87  filter: drop-shadow(0 0 10px #0003);
88  perspective: 100px;
89}
90
91.carousel__viewport {
92  position: absolute;
93  top: 0;
94  right: 0;
95  bottom: 0;
96  left: 0;
97  display: flex;
98  overflow-x: scroll;
99  counter-reset: item;
100  scroll-behavior: smooth;
101  scroll-snap-type: x mandatory;
102}
103
104.carousel__slide {
105  position: relative;
106  flex: 0 0 100%;
107  width: 100%;
108  background-color: #f99;
109  counter-increment: item;
110}
111
112.carousel__slide:nth-child(even) {
113  background-color: #99f;
114}
115
116.carousel__slide:before {
117  content: counter(item);
118  position: absolute;
119  top: 50%;
120  left: 50%;
121  transform: translate3d(-50%,-40%,70px);
122  color: #fff;
123  font-size: 2em;
124}
125
126.carousel__snapper {
127  position: absolute;
128  top: 0;
129  left: 0;
130  width: 100%;
131  height: 100%;
132  scroll-snap-align: center;
133}
134
135@media (hover: hover) {
136  .carousel__snapper {
137    animation-name: tonext, snap;
138    animation-timing-function: ease;
139    animation-duration: 4s;
140    animation-iteration-count: infinite;
141  }
142
143  .carousel__slide:last-child .carousel__snapper {
144    animation-name: tostart, snap;
145  }
146}
147
148@media () {
149  .carousel__snapper {
150    animation-name: none;
151  }
152}
153
154.carousel:hover .carousel__snapper,
155.carousel:focus-within .carousel__snapper {
156  animation-name: none;
157}
158
159.carousel__navigation {
160  position: absolute;
161  right: 0;
162  bottom: 0;
163  left: 0;
164  text-align: center;
165}
166
167.carousel__navigation-list,
168.carousel__navigation-item {
169  display: inline-block;
170}
171
172.carousel__navigation-button {
173  display: inline-block;
174  width: 1.5rem;
175  height: 1.5rem;
176  background-color: #333;
177  background-clip: content-box;
178  border: 0.25rem solid transparent;
179  border-radius: 50%;
180  font-size: 0;
181  transition: transform 0.1s;
182}
183
184.carousel::before,
185.carousel::after,
186.carousel__prev,
187.carousel__next {
188  position: absolute;
189  top: 0;
190  margin-top: 37.5%;
191  width: 4rem;
192  height: 4rem;
193  transform: translateY(-50%);
194  border-radius: 50%;
195  font-size: 0;
196  outline: 0;
197}
198
199.carousel::before,
200.carousel__prev {
201  left: -1rem;
202}
203
204.carousel::after,
205.carousel__next {
206  right: -1rem;
207}
208
209.carousel::before,
210.carousel::after {
211  content: '';
212  z-index: 1;
213  background-color: #333;
214  background-size: 1.5rem 1.5rem;
215  background-repeat: no-repeat;
216  background-position: center center;
217  color: #fff;
218  font-size: 2.5rem;
219  line-height: 4rem;
220  text-align: center;
221  pointer-events: none;
222}
223
224.carousel::before {
225  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
226}
227
228.carousel::after {
229  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
230}