Slide Show cực đẹp chỉ dùng HTML và CSS

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: hotro.hmi@hoangminhit.net
• Facebook: www.fb.com/ngohoangminhblog

Chào các bạn, đây là bài đăng đầu tiên của năm 2019 trên blog tôi chúc các bạn 1 năm vui vẻ và hạnh phúc nhé. Ở bài viết này tôi sẽ hướng dẫn các bạn làm slide ảnh tuyệt đẹp để bạn trang trí blog mà chỉ dùng HTML và CSS nên không ảnh hưởng nhiều nhé. Code mod từ code gốc của Dark Code 1 nha.

Các bạn vào blog -> Chủ Đề -> Chỉnh sửa HTML và tìm đoạn thẻ </b:skin> và dán code dưới vào trên nó
body{
  margin: 0;
  padding: 0;
  background: #34495e;
}
.slidershow{
  width: 700px;
  height: 400px;
  overflow: hidden;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar{
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.bar:hover{
  background: #fff;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
  width: 500%;
  height: 100%;
  display: flex;
}

.slide{
  width: 20%;
  transition: 0.6s;
}
.slide img{
  width: 100%;
  height: 100%;
}

#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}
#r4:checked ~ .s1{
  margin-left: -60%;
}
#r5:checked ~ .s1{
  margin-left: -80%;
}
Tiếp theo các bạn chèn code này dưới thanh menu hoặc nơi bạn thích


<div class='slidershow'>

<div><a href='#'><img src=''Link ảnh"> </a></div>

<div><a href='#'><img src=''Link ảnh"> </a></div>

<div><a href='#'><img src=''Link ảnh"> </a></div>

<div><a href='#'><img src=''Link ảnh"> </a></div>

<div><a href='#'><img src=''Link ảnh"> </a></div>

</div>

Bài đăng đến đây là xong rồi chào các bạn. Happy new year

12 comments:


Cùng tham gia bình luận bài viết này nhé!