Tạo Slider Chỉ Với HTML Và CSS - Viblo

Trang chủ » Slide Sản Phẩm Chạy Ngang » Tạo Slider Chỉ Với HTML Và CSS - Viblo

Có thể bạn quan tâm

+4 Cỡ chữ 18px Độ cao hàng 1.75 Mặc định Toàn màn hình

Màu nền

Đặt lại
  • Báo cáo
  • Thêm vào series của tôi

Bài đăng này đã không được cập nhật trong 8 năm

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 mã 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>

CSS

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

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>

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); }

Kết quả

Tham khảo

Resource:

  • https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/

All rights reserved

  • Báo cáo
  • Thêm vào series của tôi

Mục lục

Không có mục lục

Viblo Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn. Đăng nhập Đăng kí

Từ khóa » Slide Sản Phẩm Chạy Ngang