Tulisan berikut ini berhubungan dengan kode praktis membuat sudut lengkung pada objek menggunakan css3. Kita akan buat slider murni menggunakan CSS tanpa javascript. Referensi artikel ini berasal dari css-tricks. Kita hanya menggunakan kode-kode HTML dan CSS saja. Bagaimana cara membuatnya? Ayo kita mulai. Silakan buat sebuah file dengan ekstensi .html, misalnya slider-css.html. Kemudian ketik kode berikut sebagai kerangka halaman awalnya. <html> <head> <title>Slider HTML+CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> </body> </html> Selanjutnya kita buat kode untuk objek slidernya dulu. Silakan ketik kode berikut ini dan letakkan di antara tag <div class="slider">
<div class="slides">
<div>BangHaji DotCom</div>
<div>www.banghaji.com</div>
<div>Memudahkan,<br>Mencerahkan,<br>Mencerdaskan</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
</div>Oke, dari kode di atas tampak ada 11 objek menggunakan tag Masukkan kode berikut di bagian header halaman ya. Letakkan di atas tag <style>
body { font-family: 'Arial', sans-serif; padding: 0px; }
.slider {
width: 100%;
text-align: center;
overflow: hidden;
margin: 30px 0;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar { width: 3px; height: 3px; }
.slides::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
.slides::-webkit-scrollbar-track { background: transparent; }
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 180px;
height: 100px;
margin: 0 10px 0 10px;
border-radius: 7px;
background: #fff;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
border: 1px solid #555;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-size: 100%;
}
</style>Oke, simpan file ini dan selesai. Selanjutnya akses dan jalankan filenya, punya saya hasilnya seperti gambar berikut ini. Di bagian bawah objek slider ada garis warna abu-abu yang bisa digeser. Jika diakses melalui perangkat mobile, maka objek bisa langsung digeser dengan jari. 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. |
Cara membuat gambar berganti otomatis di html
Pos Terkait
Copyright © 2024 idkuu.com Inc.
