<ul class="carousel x-slide">
 <li class="item">➡️</li>
 <li class="item">➡️</li>
 <li class="item">➡️</li>
 <li class="item">➡️</li>
 <li class="item">➡️</li>
 <li class="item">➡️</li>
 <li class="item">➡️</li>
 <li class="item">➡️</li>
</ul>

<ul class="carousel y-slide">
 <li class="item">⬇️</li>
 <li class="item">⬇️</li>
 <li class="item">⬇️</li>
 <li class="item">⬇️</li>
 <li class="item">⬇️</li>
 <li class="item">⬇️</li>
 <li class="item">⬇️</li>
 <li class="item">⬇️</li>
</ul>

body {
 all: unset;

}
ul {
 all: unset;
 list-style: none;
 counter-reset: li;
}

.carousel {
 scroll-padding: 0 12px;

 width: 100vw;
 display: flex;
 gap: 12px;
}

.x-slide {
 scroll-snap-type: x mandatory;
 overflow-x: auto;
}

.y-slide {
 scroll-snap-type: y mandatory;
 overflow-y: auto;
 scroll-padding: 0;
 
 margin-top: 24px;
 flex-direction: column;
 height: 500px;
 
}

.item {
 scroll-snap-align: start;

 width: 75vw;
 height: 25vh;
 background: dodgerblue;
 flex: 0 0 auto;
 display: grid;
 place-content: center;
}

li::before {
  counter-increment: li; /* Increment the value of section counter by 1 */
  content: "Slide " counter(li);
}

.y-slide .item {
 background-color: hotpink;
 width: 100%;
 height: 50vh;
 
 scroll-snap-align: center;
}