Trong 3 bài kế tiếp này, mình sẽ hướng dẫn các bạn tạo hiệu ứng slide hay còn gọi là carousel. Bài này, chúng ta sẽ làm hiệu ứng slide – phần html và css.
Nội dung chính
Video – Hiệu ứng slide
Hướng dẫn chi tiết
Về phần html, chúng ta sẽ có 2 phần chính là các slide và các nút.
Phần HTML
<div class="khoi-slide"> <div class="cac-slide"> <div class="slide active"><img src="img/1.png" ></div> <div class="slide"><img src="img/2.png" ></div> <div class="slide"><img src="img/3.png"></div> <div class="slide"><img src="img/4.png" ></div> </div> <div class="nut-slide"> <span id="btn-prev"><i class="fas fa-chevron-left"></i></span> <span id="btn-next"><i class="fas fa-chevron-right"></i></span> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>
Phần CSS
Các slide sẽ là các hình xếp chồng lên nhau, chúng ta có thể ẩn bớt những slide sau và chỉ cho hiển thị slide trên cùng bằng cách thêm class active.
.khoi-slide { width: 100%; height: 700px; position: relative; } img { width: 100%; } .cac-slide { width: 100%; height: 700px; overflow: hidden; } .slide { position: absolute; top: 0px; left: 0px; opacity: 0; visibility: hidden; } .slide.active{ opacity: 1; visibility: visible; } .nut-slide span{ color: white; font-size: 60px; opacity: 0.6; } span#btn-prev{ position: absolute; top: 30%; left: 0%; z-index: 10; cursor: pointer; } span#btn-next{ position: absolute; top: 30%; right: 0%; z-index: 10; cursor: pointer; } .nut-slide ul { position: absolute; z-index: 10; width: 100px; bottom: 25%; left: 50%; margin-left: -50px; display: flex; justify-content: space-between; } .nut-slide ul li { width: 20px; height: 20px; background: white; opacity: 0.6; list-style: none; border-radius: 50%; cursor: pointer; transition: 0.6s; }
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
cho e hỏi cái này là viết theo bootstrap hay là code chay vậy ạ.. mong ad duyệt
html css và jquery nha, ko dùng bootstrap
sao mik chép y nguên mã mà nó ko hiện nút : class=” nut-slile” vậy ad ơi……….giúp e ……..
slile viết sai kìa bạn
oh……….mik copy lại rồi……😁….nhưng nó vẫn như vậy ……..😁😥
mình k kiếm đc link CDN font awsome
cho mình xin với
Script chính chủ từ font awesome đây. FA vừa fix lại, phải đăng ký email mới được.