Tạo slideshow ảnh chỉ dùng CSS

Thiết kế một slideshow sẽ khiến website của bạn trông đẹp mắt hơn và dễ dàng chuyển tại nội dung đến người xem, tuy nhiên việc sử dụng các slideshow bằng javacritp hay flash sẽ làm cho trang của bạn trở nên nặng nề và load chậm hơn. Chỉ bằng việc sử dụng CSS, chúng ta hoàn toàn có thể tạo ra 1 slideshow cực kỳ chuyên nghiệp mà cách làm lại rất đơn giản.

Markup

<div class="slider-container">
  <div class="menu">
    <label for="slide-dot-1"></label>
    <label for="slide-dot-2"></label>
    <label for="slide-dot-3"></label>
  </div>
  
  <input id="slide-dot-1" type="radio" name="slides" checked>
    <div class="slide slide-1"></div>
  
  <input id="slide-dot-2" type="radio" name="slides">
    <div class="slide slide-2"></div>
  
  <input id="slide-dot-3" type="radio" name="slides">
    <div class="slide slide-3"></div>
</div>

• Dùng khối menu để hiển thị ra phần navigation của slider, bao gồm các chấm tròn nhỏ, mỗi chấm tròn được markup bằng 1 thẻ label. Khi click vào các label này thì các thẻ input tương ứng với nó sẽ được checked. Một lưu ý là các thẻ input này phải để cùng name.

• Phần hình ảnh được markup bằng <div class="slide slide-i"></div> và dùng background-image để đưa ảnh làm nền. Các div này sẽ được đặt dưới các thẻ input radio để có thể sử dụng được sự kiện input:checked

• Tóm lại: click vào label -> input được checked -> thẻ div (chứa ảnh) ngay bên dưới input thực hiện animation

CSS

html, body {
  awidth: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider-container{
  height: 100%;
  awidth: 100%;
  position: relative;
  overflow: hidden; 
  text-align: center;
}

.menu {
  position: absolute;
  left: 0;
  z-index: 900;
  awidth: 100%;
  bottom: 0;
}

.menu label {
  cursor: pointer;
  display: inline-block;
  awidth: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50px;
  margin: 0 .2em 1em;
  transition: all .3s ease;
  &:hover {
    background: red;
  }
}

.slide {
  awidth: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-size: cover;
  background-position: 50% 50%;
  transition: left 0s .75s;
}

[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  transition: left .65s ease-out;
}

.slide-1 {
  background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}
.slide-2 {
  background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}
.slide-3 {
  background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}

Demo