Slide Show cực đẹp chỉ dùng HTML và CSS
Giao diện tối Nite

Header Ads

HOÀNG MINH IT BLOG


Blog chia sẻ thủ thuật miễn phí

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

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

Facebook comments

Bình Luận (12):