Bài 10: Hiệu ứng slide – phần html và css

8 14.710

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.

Video – Hiệu ứng slide

Hướng dẫn chi tiết

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

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.

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Liên hệ

Bạn cũng có thể thích
  1. 123 nói

    không download code mẫu được ạ

  2. lac lac nói

    cho e hỏi cái này là viết theo bootstrap hay là code chay vậy ạ.. mong ad duyệt

    1. Admin nói

      html css và jquery nha, ko dùng bootstrap

  3. Dao Loc nói

    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 ……..

    1. Admin nói

      slile viết sai kìa bạn

    2. Dao Loc nói

      oh……….mik copy lại rồi……😁….nhưng nó vẫn như vậy ……..😁😥

  4. nhu anh nói

    mình k kiếm đc link CDN font awsome
    cho mình xin với

    1. Admin nói

      Script chính chủ từ font awesome đây. FA vừa fix lại, phải đăng ký email mới được.

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.