JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.css"
/>
<style>
img {
max-width: 100%;
height: auto;
}
#myCarousel {
max-width: 640px;
margin: 0 auto;
}
#myCarousel .f-carousel__slide {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<div class="f-carousel" id="myCarousel">
<div
class="f-carousel__slide"
data-thumb-src="https://lipsum.app/id/31/192x144"
>
<img
width="640"
height="480"
alt=""
data-lazy-src="https://lipsum.app/id/31/640x480"
/>
</div>
<div
class="f-carousel__slide"
data-thumb-src="https://lipsum.app/id/35/192x144"
>
<img
width="640"
height="480"
alt=""
data-lazy-src="https://lipsum.app/id/35/640x480"
/>
</div>
<div
class="f-carousel__slide"
data-thumb-src="https://lipsum.app/id/34/192x144"
>
<img
width="640"
height="480"
alt=""
data-lazy-src="https://lipsum.app/id/34/640x480"
/>
</div>
<div
class="f-carousel__slide"
data-thumb-src="https://lipsum.app/id/60/192x144"
>
<img
width="640"
height="480"
alt=""
...