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: