Syntax Basketball

$42.00

<div class="product">
	<div class="demo-swiper">
		<div class="demo-swiper-slides" data-demo-swiper>
			<figure id="slide1" class="demo-swiper-slide">
				<img src="/demo-images/1.png" alt="" />
			</figure>
			<figure id="slide2" class="demo-swiper-slide">
				<img src="/demo-images/2.png" alt="" />
			</figure>
			<figure id="slide3" class="demo-swiper-slide">
				<img src="/demo-images/3.png" alt="" />
			</figure>
			<figure id="slide4" class="demo-swiper-slide">
				<img src="/demo-images/4.png" alt="" />
			</figure>
		</div>
		<div class="demo-swiper-indicators">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<h4>Syntax Basketball</h4>
	<p>$42.00</p>
</div>

<style>
	.product {
		margin-inline: auto;
		--demo-swiper-size: 300px;
		width: var(--demo-swiper-size);
	}

	.demo-swiper {
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}

	.demo-swiper-slides {
		display: flex;
		align-items: center;
		gap: 10px;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
	}

	.demo-swiper-slide {
		margin: 0;
		scroll-snap-align: start;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--demo-swiper-size);
	}

	.demo-swiper-slide > img {
		max-width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.demo-swiper-indicators {
		position: absolute;
		bottom: 10px;
		inset-inline: 0;
		justify-content: center;
		display: flex;
		gap: 10px;
		span {
			block-size: 10px;
			inline-size: 10px;
			border-radius: 50%;
			background-color: #ccc;
		}
	}
</style>