Cara membuat slideshow menggunakan html dan css
Langkah-langkah membuat slideshow menggunakan CSS Tanpa Javascript adalah sebagai berikut:
- Sebelum memulai coding, pertama-tama siapkan 3 gambar terlebih dahulu. Beri nama gambar tersebut dengan : 1.jpg - 2.jpg - 3.jpg . Kemudian masukkan 3 gambar tersebut ke folder bernama images.
- Buat file HTML bernama index.html yang berisi berikut:
<html>
<head>
<title>CSS Slider Technique</title>
<link rel="stylesheet" type="text/css" href="style.css">
</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="images/1.jpg"/>
<div class="caption">Lorem Ipsum Dolor Sit Amet 1</div>
</li>
<li class="slide-2">
<img src="images/2.jpg"/>
<div class="caption">Lorem Ipsum Dolor Sit Amet 2</div>
</li>
<li class="slide-3">
<img src="images/3.jpg"/>
<div class="caption">Lorem Ipsum Dolor Sit Amet 3</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>
Buat file CSS bernama style.css yang berisi code berikut:
/* CSS Resets */
* {
padding:0;
margin:0;
}
img {
max-width: 100%;
height: auto;
}
ul,ol {
list-style-type: none;
}
/* end css reset */
.container { /* posisikan letak slidernya */
margin:10% auto;
position: relative;
overflow: hidden;
}
.container, ul.slide li img{
width:500px; /* Sesuaikan sendiri */
height: 300px; /* Sesuaikan sendiri */
}
ul.slide {
position: absolute;
display: block;
width:300%; /* <-- Angka 3 Bergantung pada jumlah slide */
}
.caption { /* styling untuk deskripsi setiap slide */
position: absolute;
background-color: rgba(0,0,0,0.5);
bottom:0;
padding:10px;
color:#fff;
left: 0;
right: 0;
}
/* Yang membuatnya jadi slider */
ul.slide li {
display: inline-block;
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
ox-sizing:border-box;
-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%;
}
#nav-1:checked ~ ul.slide li{
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
transform: translateX(0%);
}
#nav-2:checked ~ ul.slide li{
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
#nav-3:checked ~ ul.slide li {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
transform: translateX(-200%);
}
/* End, yang membuatnya jadi slider */
/* Navigator */
.radio-nav { /* menghilangkan radio button */
display: none;
}
/* styling untuk tombol next dan previous slide */
.nav-arrow {
position: absolute;
top:45%;
width:50px;
height: 50px;
}
.nav-next {
right:10px;
}
.nav-prev {
left:10px;
}
.nav-arrow label {
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
background-color: rgba(0,0,0,0.3);
color: #fff;
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 styling untuk tombol next dan previous slide */
/*Setiap slide mempunya tombol prev dan next-nya masing-masing. Nah, tampilkan tombol yang tepat dengan kode dibawah ini*/
#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 */
/* Navigator */
Selamat Mencoba
Ketika kamu lelah dan kecewa, maka saat itu kamu sedang belajar tentang kesungguhan.#Wawasan ku luas banget
No comments:
Post a Comment