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. Halo, ketemu lagi dengan kami kursus web design grogol 🙂 , kali ini saya akan kasih tau kalian tentang bagaimana Cara Membuat Slider Otomatis Dengan HTML-CSS3, Nah buat kalian yang bingung ingin membuat slider tapi gak ingin ribet-ribet menggunakan Javascript, tidak ada salahnya untuk mencoba membuat slider dengan HTML-CSS, berikut langkah-langkahnya.  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class="container"> <div class="slideshow_wrapper"> <div class="slideshow"> <div class="slide_one slide"> <img src="http://i1.ytimg.com/vi/hP9zimdPXtk/0.jpg" /> </div>
<div class="slide_two slide"> <img src="https://i1.ytimg.com/vi/HiS1-l2xadg/mqdefault.jpg" /> </div>
<div class="slide_three slide"> <img class="slide_img" src="http://i1.ytimg.com/vi/_di83KPJY3s/0.jpg" /> </div> </div></div></div></div> Nah sekrag ikuti langkah dari kami yah Kursus Web Design grogol yaitu dengan cara pada bagian img silahkan kalian isikan gambar sesuai keinginan, bisa banyak atau sedikit, setelah itu, kita buat efek slider nya dengan menggunakan CSS3 berikut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 .container { background:#000; width:500px; margin: 0 auto; padding: 10px 10px 0 10px;
}
.slideshow_wrapper { width:500px; height:280px; overflow: hidden;
}
.slideshow { width:1500px; height:280px; margin: 0 0 0 -1000px; position: relative; -webkit-animation-name: slide_animation; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state: running; }
.slide {
width:500px; height: 270px; position:relative; float:left; overflow:hidden;
}
.slideshow img{ width:500px; height:270px; }
@-webkit-keyframes slide_animation {
0% {left:0px;} 10% {left:500px;} 20% {left:500px;} 30% {left:500px;} 40% {left:500px;} 50% {left:500px;} 60% {left:500px;} 70% {left:1000px;} 80% {left:1000px;} 90% {left:1000px;} 100% {left:1000px;}
} Kalo sudah, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya, Selesai Cukup mudah bukan ? Baik sampai disini tutorial mengenai bagaimana Cara Membuat Slider Otomatis Dengan HTML-CSS3, semoga bermanfaat, amin. Sampai ketemu dilain kesempatan dan selamat mencoba 🙂 Kalau mau belajar lebih dalam mengenai CSS 3 dapat langsung saja ikut Kursus Web Design Grogol yang beralamat di: |
Cara membuat slideshow otomatis di html
Pos Terkait
Copyright © 2024 membukakan Inc.
