Membuat slide gallery dengan CSS tanpa jQuery

 Author : hadinug, 02 November, 2014, Komentar



Membuat slide gallery dengan javascript, rasanya sudah biasa. Namun membuat slide gallery tanpa menggunakan javascript, hanya menggunakan css tanpa js, sepertinya masih jarang. Flash back kebelakang dikit nih..., sekitar 7 s/d 8 bulan yang lalu sempat terjadi perdebatan di forum css Facebook, ada yang mengatakan bahwa css saja tanpa javascript tidak bisa membuat slide gallery yang menarik. Namun saya pikir tidak, bahkan saya sempat buktikan... ternyata bisa :D. Ingin tau bagaimana cara membuat nya silahkan ikuti langkah-langkah berikut:



Langka-1 [HTML]

Ikuti sintak HTML berikut:

   <div class="slides">
                <div class="slide">
                    <input type="radio" id="slide-1" name="slide-group" checked="checked"> 
                    <div class="content">
                        <img class="fadeInLeft" src="s-1.png">
                        <p class="block">Hei, this is slide with css#1</p>
                    </div> 
                </div>
                <div class="slide">
                    <input type="radio" id="slide-2" name="slide-group"> 
                    <div class="content">
                        <img class="fadeInLeft" src="s-2.png">
                        <p class="block">Hei, this is slide with css#2</p> 
                    </div> 
                </div>
                <div class="slide">
                    <input type="radio" id="slide-3" name="slide-group"> 
                    <div class="content">
                        <img class="fadeInLeft" src="s-3.png">
                        <p class="block">Hei, this is slide with css#3</p> 
                    </div> 
                </div>
                <div class="slide">
                    <input type="radio" id="slide-4" name="slide-group"> 
                    <div class="content">
                        <img class="fadeInLeft" src="s-4.png">
                        <p class="block">Hei, this is slide with css#4</p> 
                    </div> 
                </div> 
    </div>


Langkah-2 [CSS]

Ikuti sintak CSS berikut:

 
.slides {
    position: relative;   
    min-height: 320px;
    clear: both;
    max-width: 600px;    
    margin: 25px 0;
    padding: 0px;
    background: #ddd;
    border: 1px solid #ccc;
}
.slide {
    position: relative;
} 
.slide [type=radio] {
    position: relative;
    top: 290px;
    left: 470px;
    float: left;
    z-index: 10000;
    cursor: pointer;
    width: 21px;
}
.slide [type=radio]:before{
    background: #141414;
    content: ">";
    padding: 5px 10px;
    color: #fff;  
}
.slide input[type=radio]:focus:before, .slide input[type=radio]:checked:before{
    background: #ff3333;
    content: "X";
}
.content img{
    max-width: 100%;
}

.content object{
    max-width: 90%;
}
.content p{
    padding: 10px;
    color: #fff;
    background: #111;
    margin: -10px 0px;
}
.content { 
    position: absolute;
    top: 0px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 0px;  
    display: none;
    z-index: 0;
} 
[type=radio]:checked ~ .content {
    z-index: 1;  
    display: block;

} 
@-webkit-keyframes fadeInLeft {
    0% {
    opacity: 1;
    -webkit-transform: translateX(-500px);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
    0% {
    opacity: 1;
    -moz-transform: translateX(-500px);
}

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
    0% {
    opacity: 1;
    -o-transform: translateX(-500px);
}

100% {
    opacity: 1;
    -o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
    0% {
    opacity: 1;
    transform: translateX(-500px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
}

           
.fadeInLeft{
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

Sangat mudah bukan, silahkan dicoba dan lihat demonya disini
 
Bagikan halaman ke sosial media
 
Tags :   css    slide       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda