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

Giới thiệu

Có rất nhiều thư viện JavaScript để tạo Slider. Trong bài viết này mình sẽ giới thiệu tới các bạn cách để tạo một Slider đơn giản chỉ với HTML và CSS.

Bắt đầu

HTML

<div class="slider">
  <div class="slide" id="slide-1">1</div>
  <div class="slide" id="slide-2">2</div>
  <div class="slide" id="slide-3">3</div>
  <div class="slide" id="slide-4">4</div>
  <div class="slide" id="slide-5">5</div>
</div>
Code language: HTML, XML (xml)

CSS

.slider {
  background: red;
  color: white;
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
}
Code language: CSS (css)

Chúng ta được kết quả như hình sau:

Thêm Style để chạy khi vuốt

.slider {
  ...

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

Có chút vấn đề khi bạn vuốt slider đang bị nhảy cóc. Fix bằng cách sau: Thêm snap-points vào mỗi slider

.slider {
  ...

  -webkit-scroll-snap-points-x: repeat(300px);
      -ms-scroll-snap-points-x: repeat(300px);
          scroll-snap-points-x: repeat(300px);
  -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
}

Nhìn bây giờ nó đã tốt hơn:

Tạo pagination

Thêm các anchor links liên kết tới nội dung:

<div class="slide-wrap">
  
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div class="slider">
    <div class="slide" id="slide-1">1</div>
    <div class="slide" id="slide-2">2</div>
    <div class="slide" id="slide-3">3</div>
    <div class="slide" id="slide-4">4</div>
    <div class="slide" id="slide-5">5</div>
  </div>
  
</div>
Code language: HTML, XML (xml)

Thêm một chút style cho các buttons chúng ta được kết quả như sau:

Thêm hiệu ứng khi active slide

.slides > div:target {
  transform: scale(0.8);
}
Code language: CSS (css)

Kết quả

Nguồn:

• https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/
• https://viblo.asia/p/tao-slider-chi-voi-html-va-css-eW65G2NRlDO

Kết luận

Qua đây là một số chia sẻ về tạo Slider chỉ với HTML và CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.