Tạo Slider Chỉ Với HTML Và CSS - Viblo
Có thể bạn quan tâm
Màu nền
Đặt lạiBài đăng này đã không được cập nhật trong 7 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
Mục lục
Không có mục lục
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
-
Hướng Dẫn Tạo Trang Cuộn Sản Phẩm Mới Bằng Bootstrap
-
Cách Tạo Slide Sản Phẩm Nổi Bật Bằng Bootstrap - HocwebGiare
-
Slider Sản Phẩm Từ Bootstrap Carousel Với Khả Năng Responsive
-
Code Slide Ảnh Chạy Ngang Bằng Jquery Css Image Slider, Bài 11
-
Slider Bài Mới Nhất Trượt Ngang Với Thumbnail Cho Blogger [Ves1]
-
Cách Tạo Slideshow Cho Trang Web(2022)
-
CÁCH TẠO SLIDE TRÌNH DIỄN BANNER CHẠY NGANG ĐỘC ĐÁO
-
Hỏi Về "sản Phẩm Slide Chạy Ngang"
-
Code Slide ảnh Chạy Ngang Liên Tục Không Bị Khoảng Trống - Taolao
-
15 Thư Viện Slider Jquery Miễn Phí Cho Dự án Website Của Bạn
-
Tạo Slide ảnh Trong HTML Với OwlCarousel - Quách Quỳnh
-
Hướng Dẫn Làm Slide Sử Dụng Javascript - Homiedev
-
Carousel - LadiPage Help Center