<div class="embla" id="embla">
	<div class="embla__container">
		<div class="embla__slide">
			<p>foo</p>
		</div>
		<div class="embla__slide">
			<p>bar</p>
		</div>
		<div class="embla__slide">
			<p>hoge</p>
		</div>
		<div class="embla__slide">
			<p>piyo</p>
		</div>
		<div class="embla__slide">
			<p>huga</p>
		</div>
	</div>
</div>
.embla {
	overflow: hidden;
	width: 75%;
	margin: auto;
}
.embla__container {
	display: flex;
}
.embla__slide {
	position: relative;
	min-width: 100%;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-shadow: 2px 2px 2px #999;
	font-size: 5em;
	font-weight: bold;
	background-size: cover;
}
.embla__slide:nth-child(1) {
	background-image: url("https://picsum.photos/1000/250.webp");
}
.embla__slide:nth-child(2) {
	background-image: url("https://picsum.photos/1050/250.webp");
}
.embla__slide:nth-child(3) {
	background-image: url("https://picsum.photos/1100/250.webp");
}
.embla__slide:nth-child(4) {
	background-image: url("https://picsum.photos/1200/250.webp");
}
.embla__slide:nth-child(5) {
	background-image: url("https://picsum.photos/1300/250.webp");
}
const emblaNode = document.getElementById("embla");
const options = { loop: true };

const embla = EmblaCarousel(emblaNode, options);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/embla-carousel@latest/embla-carousel.umd.js