Chia Sẻ Slide Trình Chiếu Ảnh Có Điều Hướng Chỉ Sử Dụng HTML & CSS

Mỗi Blog/Website đều cần có những điểm nhấn riêng để một phần thu hút sự quan tâm của người đọc. và trong đó Slide chạy ảnh đẹp luôn là những điểm nhấn trên 1 Website, blog. Slide đó bạn có thể trình bày những thông tin nổi bật như bài viết, quảng cáo, hình ảnh đẹp...1 hiệu ứng Slide đẹp, load nhẹ. cũng góp phần làm tô điểm thêm cái đẹp và sống động của trang Web.
Ở bài viết hôm nay mình giới thiệu tới các bạn Slideshow chạy ảnh chỉ sử dụng Html và Css

Viết Css. Đặt nó dưới thẻ ]]></b:skin>

.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%;
}

Code hiển thị

</div>
<div class="slide">
<img src="#" alt="">
</div>
<div class="slide">
<img src="#" alt="">
</div>
<div class="slide">
<img src="#" alt="">
</div>
<div class="slide">
<img src="#" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>

#Darkcode1
Chúc các bạn thành công ! 
Nếu có vấn đề & thắc mắc, comment để được hỗ trợ nhé <3