Tạo slider chỉ bằng 14 dòng CSS

Tạo slider chỉ với HTML và CSS

Demo

Html

2022

<main class="slides">
      <section class="section-1"></section>
      <section class="section-2"></section>
      <section class="section-3"></section>
</main>

CSS

2022

/* Hide the scroll bars */
body {
  overflow-y: hidden;
}

.slides {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  overflow-x: scroll;
/*   width: 500px; */
/*   height: 300px; */
}

section {
  height: 100vh;
  min-width: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
  scroll-snap-align: start;
}

.section-1 {
  background-image: url("https://images.unsplash.com/photo-1478104718532-efe04cc3ff7f");
}

.section-2 {
  background-image: url("https://images.unsplash.com/photo-1472437774355-71ab6752b434");
}

.section-3 {
  background-image: url("https://images.unsplash.com/photo-1572985025058-f27aeca1b8bf");
}