/* 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: -25% auto;
    position: relative;
    overflow: hidden;
    margin-left: 47%;
}
.container, ul.slide li img{
width:500px; /* Sesuaikan sendiri */
height: 315px; /* Sesuaikan sendiri */
}ul.slide {
position: absolute;
display: block;
width:700%; /* <-- 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, alias kode intinya */
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%;
}
ul.slide li.slide-4 {
left: 100%;
}
ul.slide li.slide-5 {
left: 400%;
}
ul.slide li.slide-6 {
left: 100%;
}
#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%);
}
#nav-4:checked ~ ul.slide li {
-webkit-transform: translateX(-300%);
-moz-transform: translateX(-300%);
transform: translateX(-300%);
}
#nav-5:checked ~ ul.slide li {
-webkit-transform: translateX(-400%);
-moz-transform: translateX(-400%);
transform: translateX(-400%);
}
#nav-6:checked ~ ul.slide li {
-webkit-transform: translateX(-500%);
-moz-transform: translateX(-500%);
transform: translateX(-500%);
}
/* 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 */
/* Ini termasuk kode inti. 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-6,
#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-4,
#nav-4:checked ~ .nav-prev label.nav-3,
#nav-4:checked ~ .nav-next label.nav-5,
#nav-5:checked ~ .nav-prev label.nav-4,
#nav-5:checked ~ .nav-next label.nav-6,
#nav-6:checked ~ .nav-prev label.nav-5,
#nav-6:checked ~ .nav-next label.nav-1 {
z-index: 2;
opacity: 1;
}
/* end */
/* Navigator */