Tutorial Membuat Slide Show Sederhana - Blog'e Wong Kreteg Ireng ~ Blog Wong Kreteg Ireng

Tutorial Membuat Slide Show Sederhana - Hai, Sobat, kali ini mau berbagi artikel tentang cara membuat slideshow sederhana untuk blog sobat.

Tutorial Membuat Slide Show Sederhana - Blog'e Wong Kreteg Ireng

<br /><br /><html> <head> <title>Latihan Membuat Slide Show</title> <style> /*css resets*/ *{ padding:0; margin:0; } img{ max-width:100%; height:auto; } ul,ol{ list-style-type:none; } /*end css resets*/ /*posisi letak slider*/ .container{ margin: 10% auto; position: relative; overflow: hidden; } .container, ul.slide li img{ width: 500px; height: 300px; } ul.slide{ position: absolute; display: block; width: 300%; } .caption{ position: absolute; background-color:rgba(0,0,0,0.5); bottom: 0px; padding: 10px; color: white; left: 0; right: 0; } /*end posisi letak slider*/ /*css slider*/ ul.slide li{ display: inline-block; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; transition: transform 2000ms; -webkit-transition: -webkit-transform 2000ms; -moz-transition: -moz-transform 2000ms; transition:-webkit-transform 2000ms, transform 2000ms; } ul.slide li.slide-1{ left: 0%; } ul.slide li.slide-2{ left: 100%; } ul.slide li.slide-3{ left: 200%; } #nav1:checked ~ ul.slide li{ transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); } #nav2:checked ~ ul.slide li{ transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); } #nav3:checked ~ ul.slide li{ transform: translateX(-200%); -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); } /*end css slider*/ /*nav*/ .radio-nav{ display: none; } /*end nav*/ /*style tombol*/ .nav-arrow{ position: absolute; top: 45%; width: 50px; height: 50px; } .nav-next{ right: 10px; } .nav-prev{ left: 10px; } .nav-arrow label{ transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; background-color:rgba(0,0,0,0.5); color: white; border-radius: 50%; display: block; position: absolute; padding:15px 20px; cursor: pointer; z-index: 1; opacity: 0; font-weight: bold; line-height: 1; } .container:hover .nav-arrow label{ background-color:rgba(0,0,0,0.7); } /*end style tombol*/ /*urutan tombol*/ #nav-1:checked ~ .nav-prev label.nav-3, #nav-1:checked ~ .nav-next label.nav-2, #nav-2:checked ~ .nav-prev label.nav-1, #nav-2:checked ~ .nav-next label.nav-3, #nav-3:checked ~ .nav-prev label.nav-2, #nav-3:checked ~ .nav-next label.nav-1 { z-index: 2; opacity: 1; } /*end urutan tombol*/ </style> </head> <body> <div class="container"><input type="radio" name="slide" class="radio-nav" id="nav-1" checked/> <input type="radio" name="slide" class="radio-nav" id="nav-2" /> <input type="radio" name="slide" class="radio-nav" id="nav-3" /> <ul class="slide"><li class="slide-1"> <img src="1 (1).png"> <div class="caption">123</div></li><li class="slide-2"> <img src="1 (2).png"> <div class="caption">231</div></li><li class="slide-3"> <img src="1 (3).png"> <div class="caption">312</div></li></ul><div class="nav-arrow nav-next"><label class="nav-1" for="nav-1">></label> <label class="nav-2" for="nav-2">></label> <label class="nav-3" for="nav-3">></label> </div><div class="nav-arrow nav-prev"><label class="nav-1" for="nav-1"><</label> <label class="nav-2" for="nav-2"><</label> <label class="nav-3" for="nav-3"><</label> </div></div></body> </html><br /><br /><br />

Sekian Artikel kali ini, semoga bisa bermanfaat bagi sobat yang sedang belajar membuat slide show sederhana.

Masih banyak lagi tutorial-tutorial yang nanti akan saya bagikan, selengkapnya cek Blog'e Wong Kreteg Ireng.

Blog Wong Kreteg Ireng

Pages

Tuesday, July 10, 2018