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

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

Anh NguyễnBạn nghĩ gì về bài viết này?

NỘI DUNG BÀI VIẾT

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:

50955215336 b11f93c269 n

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;
}
50954513728 1a9677d49d z

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

50955321902 a1d8619669 z

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:

50955321987 77e5f30e9a z

Thêm hiệu ứng khi active slide

.slides > div:target {
  transform: scale(0.8);
}
Code language: CSS (css)
c2581b2b 4e06 48e3 8797 b09503101061
T

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.

Bình luận