Cara Membuat Minimalist CSS Image Carousel

Pilihan Editor :

Cara Membuat Minimalist CSS Image Carousel
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!

Tidak ada komentar :

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.