Tạo slide ảnh cho web

     

Giới thiệu

Có rất nhiều tlỗi viện Javascript để tạo slider. Trong bài viết này mình vẫn trình làng tới chúng ta phương pháp để chế tạo ra một slider dễ dàng và đơn giản chỉ với mã HTML với CSS.

Bắt đầu

HTML




Bạn đang xem: Tạo slide ảnh cho web

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 tác dụng nlỗi hình sau:

*

Thêm Style để chạy lúc vuốt

.slider ... -webkit-overflow-scrolling: touch; scroll-behavior: smooth;

*
Có chút vụ việc khi chúng ta vuốt slider hiện giờ đang bị khiêu vũ cóc. Fix bằng cách sau:Thêm snap-points vào từng 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 hiện thời nó sẽ giỏi hơn:

*
Tạo paginationThêm những anchor liên kết links tới nội dung:


1 2 3 4 5
1
2
3
4
5
Thêm một chút style cho các buttons chúng ta được tác dụng như sau:

*
Thêm hiệu ứng Lúc active sầu slide

.slides > div:target transform: scale(0.8);

Kết quả

Tsi mê khảo

Resource:


Đã đăng ký Bản quyền




Xem thêm: Cách Kiểm Tra Tốc Độ Load Của Website Đơn Giản Và Chính Xác Nhất

Báo cáo
Mục lục

Không bao gồm mục lục


Tài nguim
Dịch Vụ Thương Mại
Ứng dụng cầm tay
*
*

*

Liên kết
Tiếng ViệtEnglish

No data


Chuyên mục: Domain Hosting