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. Show Nội dung chính
Video – Hiệu ứng slideHướng dẫn chi tiết"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn 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 CSSCá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. Carousel chính là 1 plugin trong bootstrap nói riêng và jquery nói chung để có thể duyệt được các phần tử như hình ảnh, slide,… Vậy cách tạo carousel đơn giản như thế nào? Mời các bạn cùng tham khảo bài viết dưới đây của blog getbootstrap nhé. Cách tạo carousel đơn giảnTrước tiên, tôi sẽ tạo ra 1 đợn code html đơn giản dưới đây.
Sau đó chạy đoạn code ở trên, và nó sẽ đưa ra kết quả hiển thị giống như hình ảnh ở dưới đây:  Trong đó: Phần tử div ở ngoài cùng:
Phần “indicators”: đây là những chấm tròn màu xanh ở dưới slide giống như ví dụ ở trên, bạn có thể kéo lên kết quả để check lại.
Phần “wrapper for slides”: sử dụng để định nghĩa bên trong thẻ div với class là: .carousel-inner, (tất cả các nội dung trong mỗi slide sẽ được định nghĩa trong class .item, và nội dung ở đây có nghĩa là hình ảnh hay văn bản. Class .active dùng để mô tả slide nào đang được hiển thị. Phần “Left and right controls”: sử dụng nhằm cho phép người dùng có thể xem hình ảnh trước khi thao tác lên đó như tiến tới hay lùi lại.
Hướng dân thêm caption cho carouselNếu như bạn muốn thêm caption vào các slide có trong 1 carousel thì bạn chỉ cần thêm div class=”carousel-caption” bên trong mỗi phần tử div class=”item” để có thể tạo ra các chú thích.
kết quả Hi vọng với những chia sẻ ở trên về 1 plugin vô cùng tuyệt vời ở trong bootstrap đó chính là carousel. Nếu như bạn còn thắc mắc về carousel thì có thể để lại thông tin ở bài viết dưới đây, đội ngũ admin của blog getbootstrap sẽ giúp bạn trả lời thắc mắc trong thời gian sớm nhất. Chúc các bạn thành công. |
