Membuat Slider Image dengan HTML dan CSS

Hallo teman-teman, seperti biasa dihari yang cerah dan bahagia ini dipembahasan kali ini saya akan membahas tentang cara Membuat Slider Image dengan HTML dan CSS.

Sebelum kita masuk kepembahasan, hal yang perlu kalian ketahui itu adalah yang pasti harus sudah mengenal HTML dan CSS. Oke disini saya anggap teman-teman sudah mengenal HTML dan CSS.

Langsung saja ke pembahasan, jadi slider image itu merupakan sebuah animasi dalam mengubah / mengganti gambar yang pertama dan seterusnya pada sebuah website. Jika teman-teman menemukan sebuah website dan ada gambar yang berganti ganti dalam beberapa detik didalam sebuah website tersebut maka itu disebutnya slider image. Rata-rata didalam membuat slider image itu menggunakan javascript(JQuery). Tapi beda hal nya kali ini saya hanya menggunakan HTML dan CSS saja. Penasaran bukan ?

Oke langsung saja kita mulai, Pertama-teman siapkan terlebih dahulu foldernya dan masukan gambar apa saja terserah teman-teman didalam folder yang sudah 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="" /></div>
	    <div class="slide"><img src="bg2.jpg" alt="" /></div>
	    <div class="slide"><img src="bg3.jpg" alt="" /></div>
	</div>
</div>

Jika sudah simpan file HTML nya ke dalam folder yang sudah teman-teman siapkan tadi, dan jangan lupa sesuaikan nama file gambarnya. Oke langkah selanjutnya 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;
}

Jika sudah simpan file cssnya, kemudian jika teman-teman menggunakan css external maka teman-teman harus menghubungkan antara file HTML dengan file CSS nya. Dan jika teman-teman menggunakan css internal maka langsung saja teman-teman jalankan/run di browser yang teman-teman gunakan.

Jika berhasil maka hasilnya akan terlihat pada gambar dibawah ini :

Cukup mudah bukan dalam Membuat Slider Image dengan HTML dan CSS ?

Oke jadi seperti itulah dalam Membuat Slider Image dengan HTML dan CSS. Sekian pembahasan kali ini tentang cara Membuat Slider Image dengan HTML dan CSS Semoga dapat bermanfaat.

Terimakasih.

Membuat Slider Image dengan HTML dan CSS

Kategori