Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Belajar CSS

CSS : Membuat Slider

Posting Komentar

Slider adalah elemen pada website yang menampilkan beberapa gambar atau konten secara bergantian pada suatu area.
Pada kesempatan kali ini kita akan Membuat Slider dengan CSS unutk membuat tampilan website menjadi lebih menarik.

Struktur Folder

.
└── membuat-slider/
    └── slider.html
    └── gambar/

Membuat File HTML

Berikut adalah isi dari file slider.html 

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider Otomatis CSS</title>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .slider {
    width: 100%;
    max-width: 700px;
    height: 350px;
    overflow: hidden;
    margin: 40px auto;
    border: 2px solid #ccc;
    position: relative;
  }

  .slides {
    display: flex;
    width: 400%;
    height: 100%;
    animation: slide 16s infinite;
  }

  .slides img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }

  @keyframes slide {
    0%   { margin-left: 0; }
    20%  { margin-left: 0; }

    25%  { margin-left: -100%; }
    45%  { margin-left: -100%; }

    50%  { margin-left: -200%; }
    70%  { margin-left: -200%; }

    75%  { margin-left: -300%; }
    95%  { margin-left: -300%; }

    100% { margin-left: 0; }
  }
</style>

</head>
<body>

  <div class="slider">
    <div class="slides">
      <img src="alamat-gambar" alt="Gambar-1">
      <img src="alamat-gambar" alt="Gambar-2">
      <img src="alamat-gambar" alt="Gambar-3">
      <img src="alamat-gambar" alt="Gambar-4">
    </div>
  </div>

</body>
</html>

Posting Komentar untuk "CSS : Membuat Slider"