Cara Membuat Minimalist CSS Image Carousel

byKurazone Net -
KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali saya berbagi tutorial mengenai "Cara Membuat Minimalist CSS Image Carousel", hasil jadi dari tutorial ini adalah menampilkan deretan gambar yang akan berjalan ke kiri seperti breakingnews yang ada di televisi dengan tambahan CSS gradasi dan animasi.

Berikut adalah Cara Membuat Minimalist CSS Image Carousel

1. Buka akun blogger
2. Pilih Tata Letak
3. Buat Widget Baru, pilih HTML/Javascript
4. Copy kode CSS dan HTML dibawah ini, lalu paste didalam isi widget
<style>.kuraslider {
  width: 100%;
  display: -webkit-inline-box;
  height: 100px;
  position: relative;
  background: white;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
  overflow: hidden;
}
.slide {
  height: 100px;
  width: max-content;
  display: flex;
  align-items: center;
  animation: slideshow 20s linear infinite;
}
.slide img {
  height: 70px;
  padding: 0 30px 0 30px;
}

@keyframes slideshow {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}
.kuraslider::before, .kuraslider::after {
  height: 100px;
  width: 200px;
  position: absolute;
  content: "";
  background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%);
  z-index: 2;
}
.kuraslider::before {
  left: 0;
  top: 0;
}
.kuraslider::after {
  right:0;
  top:0;
  transform: rotateZ(180deg);
}</style>
<div class="kuraslider">
<div class="slide">
<img src="logo1.png" />
<img src="logo2.png" />
<img src="logo3.png" />
<img src="logo4.png" />
<img src="logo5.png" />
<img src="logo6.png" />
<img src="logo7.png" />
</div>
<div class="slide">
<img src="logo1.png" />
<img src="logo2.png" />
<img src="logo3.png" />
<img src="logo4.png" />
<img src="logo5.png" />
<img src="logo6.png" />
<img src="logo7.png" />
</div>
5. Simpan

NOTE :
  1. Ganti URL Image logo1.png menjadi URL Image milik kalian, misalnya diubah menjadi https://sites.google.com/site/sotazone/kurazone.png
  2. Untuk kode yang ditandai dengan warna HIJAU, isinya disamakan dengan kode yang ditandai warna KUNING. Artinya adalah jika kalian mengganti URL Image pada Image logo1.png maka URL Image yang bawah juga harus disamakan.
  3. Cari kode animation: slideshow 20s linear infinite; Ubah angka 20 menjadi lebih besar atau lebih kecil untuk mengatur kecepatan animasi, semakin besar semakin lambat

Contoh perbandingan kecepatan 8s (atas) dengan 20s (bawah)

































Nah, itulah informasi mengenai "Cara Membuat Minimalist CSS Image Carousel", selamat mencoba dan semoga bermanfaat. Goodluck!
Tags





أحدث أقدم