Membuat Slider Image dengan HTML dan CSS

Hallo teman-teman, seperti biasanya dihari yang cerah dan bahagia ini dipembahasan kali ini saya akan membahas mengenai cara Merancang Slider Image dengan HTML dan CSS.

Sebelum kita masuk kepembahasan, hal yang perlu kalian ketahui itu ialah yang pasti mesti telah mengenal HTML dan CSS. Oke disini saya anggap teman-teman telah mengenal HTML dan CSS.

Seketika saja ke pembahasan, jadi slider image itu adalah sebuah sebuah animasi pada mengubah / mengganti gambar yang pertama-tama dan seterusnya di sebuah laman. Bila teman-teman menemukan sebuah laman dan ada gambar yang berganti ganti pada beberapa detik didalam sebuah laman tersebut karenanya itu disebutnya slider image. Rata-rata didalam merancang slider image itu menggunakan javascript(JQuery). akan tetapi beda hal nya kali ini saya hanya menggunakan HTML dan CSS saja. Penasaran bukan ?

Oke seketika saja kita mulai, Pertama-tama-teman siapkan terlebih dahulu foldernya dan masukan gambar apa saja terserah teman-teman didalam folder yang telah teman-teman siapkan.

Kemudian jalankan text editor yang teman-teman gunakan, lalu ketik script HTML di bawah ini :

<div id=slider>
<div id=slide-holder>
  <div class=slide><img src=bg1.jpg alt= seperti biasanya dihari yang cerah dan bahagia ini dipembahasan kali ini saya akan membahas  Merancang Slider Image dengan HTML dan CSS /></div>
    <div class=slide><img src=bg2.jpg alt= seperti biasanya dihari yang cerah dan bahagia ini dipembahasan kali ini saya akan membahas  Merancang Slider Image dengan HTML dan CSS /></div>
    <div class=slide><img src=bg3.jpg alt= seperti biasanya dihari yang cerah dan bahagia ini dipembahasan kali ini saya akan membahas  Merancang Slider Image dengan HTML dan CSS /></div>
</div>
</div>

Bila telah simpan file HTML nya ke pada folder yang telah teman-teman siapkan tadi, dan jangan lupa sesuaikan nama file gambarnya. Oke langkah berikutnya ketik script CSS dibawah ini kedalam text editor yang teman-teman gunakan :

#slider {
  width: 950px;
  height: 500px;
  overflow: hidden;
  border: 1px solid #c69;
}

.slide {
  width: 500px;
  height: 500px;
  float: left;
  position: relative;
}

#slide-holder {
  width: 400%;
  position: relative;
  left: 0;
  -webkit-animation: scroller 10s infinite;
          animation: scroller 10s infinite;
}

@-webkit-keyframes scroller {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  33% {
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
  }
  66% {
    -webkit-transform: translateX(-800px);
            transform: translateX(-800px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes scroller {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  33% {
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
  }
  66% {
    -webkit-transform: translateX(-800px);
            transform: translateX(-800px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
body {
  font-family: sans-serif;
}

#slider {
  margin: 0 auto;
}

.slide:nth-child(1) {
  background: #c69;
}

.slide:nth-child(2) {
  background: wheat;
}

.slide:nth-child(3) {
  background: #eee;
}

Bila telah simpan file cssnya, kemudian apabila teman-teman menggunakan css external karenanya teman-teman mesti menghubungkan antara file HTML dengan file CSS nya. Dan apabila teman-teman menggunakan css internal karenanya seketika saja teman-teman jalankan/run di browser yang teman-teman gunakan.

Bila berhasil karenanya hasilnya akan terlihat di gambar dibawah ini :

Lumayan gampang bukan pada Merancang Slider Image dengan HTML dan CSS ?

Oke jadi seperti begitulah pada Merancang Slider Image dengan HTML dan CSS. Sekianlah pembahasan kali ini mengenai cara Merancang Slider Image dengan HTML dan CSS Semoga dapat bermanfaat.

Terimakasih.

Sumber https://kursuswebsite.org