Ngoding Jadi Solusi

First, solve the problem. Then, write the code

Ads Here

Thursday, June 1, 2017

membuat slideshow menggunakan html dan css

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 

No comments:

Post a Comment