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

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

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.

Liên hệ

Bài viết liên quan

Bài 1: Giới thiệu jQuery và hướng dẫn cài đặt phần mềm Bài 9: Tạo sidenav – side menu bằng jquery Bài 11: Hiệu ứng slide – Xử lý nút next và prev bằng jquery Bài 22: Tạo hiệu ứng chuyển động với thư viện TweenMax