Setelah cukup lama blog ini tidak membagikan slider gambar, maka pada kesempatan ini akan membagikan slider gambar yang di buat hanya dengan CSS, HTMl dan tanpa JS. Sayangnya untuk menerapkan slider ini di blog, kamu harus benar-benar menyesuaikan segala ukuran yang ada di slider ini dengan template blog yang kamu gunakan.

Untuk pemula, mungkin sulit juga menggunakan slider ini pada blog, tapi karena gua bingung mau posting apa, gue bagiin slider ini aja deh. Oh yah, ini adalah slider gambar, jika kamu ingin slider yang menampilkan postingan kamu secara otomatis kamu dapat mecarinya di kategori ini: slider blogger.

Auto Play slider without JS

Slider Gambar Di Blog

CSS

/*CONTAINER*/
.cont { margin:20px auto; display:block; width:60%; height:40%; border:solid 2px #e0e0e0; overflow:hidden; }
img { width:25%; -webkit-background-size:contain; -moz-background-size:contain; background-size:contain; display:inline-block; float:left; margin:0; padding:0; }
.image { display:block; width:400%; height:40%; }
/*BUTTON PLAY&STOP*/
.menu { position:absolute; width:94px; height:30px; margin:2px; z-index:1; }
.tooltip { width:80px; height:40px; margin-top:-34px; margin-left:-94px; display:inline-block; float:left; border-radius:2px; background:#fff; z-index:-10; opacity:.8; -webkit-animation:tool ease-in 16s; -webkit-animation-fill-mode:forwards; animation:tool ease-in 16s; animation-fill-mode:forwards; }
.tooltip > p { font-size:1em; font-weight:bolder; color:#F00; }
.tooltip:after { content:""; position:absolute; width:0; height:0; border-top:5px solid transparent; border-left:10px solid #fff; border-bottom:5px solid transparent; margin:-24px 40px; }
.hideStop,.hidePlay,.hidePause { width:30px; height:30px; margin-top:-30px; border-radius:15px; display:inline-block; float:left; z-index:999; opacity:.3; }
.hideStop { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat; background-size:100%; visibility:hidden; }
.hidePlay { margin-left:32px; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat; background-size:100%; visibility:hidden; }
.hidePause { margin-left:64px; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat; background-size:100%; }
.butPlay,.butStop,.butPause { width:30px; height:30px; border-radius:15px; z-index:2; margin-left:2px; background:rgba(75,78,67,.6); display:inline-block; float:left; }
.butPlay { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butStop { margin-left:0; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butPause { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butPlay:hover { background:transparent url(http://s45.radikal.ru/i109/1310/98/4834faaaa287.png) 0 0 no-repeat; background-size:100%; }
.butStop:hover { background:transparent url(http://i021.radikal.ru/1310/2f/d8b2c38314ff.png) 0 0 no-repeat; background-size:100%; }
.butPause:hover { background:transparent url(http://s019.radikal.ru/i621/1310/ed/b9bfce7c1a1a.png) 0 0 no-repeat; background-size:100%; }
/*BOTTOM LINE*/
.aline { position:absolute; visibility:hidden; width:60%; height:10px; }
.line { position:absolute; height:10px; background:#222; opacity:.3; z-index:1; }
.aline > .bord { display:inline-block; float:left; width:25%; height:10px; border-bottom:2px solid #e0e0e0; }
.bord > span { width:2px; height:10px; display:inline-block; float:right; background-color:#e0e0e0; }
.bord:last-child > span { width:0; height:0; }
/*PAGGINATION*/
.but { position:relative; width:100%; height:20px; margin-top:-21px; float:left; text-align:center; z-index:100; }
.select_but { display:inline-block; width:16px; height:16px; border-radius:8px; background:rgba(0,0,0,.8); z-index:5; }
.select_but > div { width:10px; height:10px; border-radius:5px; background:#fff; margin:3px; display:none; }
.select_but:hover { background:rgba(255,255,255,.6); cursor:pointer; }
/*SLIDE MANAGE*/
.right,.left { width:64px; height:64px; margin-top:15%; display:inline-block; opacity:.9; cursor:pointer; }
.left { background:#ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/leftarrow.png) 0 0 no-repeat; background-size:100%; border-radius:32px; margin-left:12%; float:left; }
.right { background:#ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/monotone_arrow_right.png) 0 0 no-repeat; background-size:100%; border-radius:32px; margin-right:12%; float:right; }
.right:hover { background-color:#68D9EE; -webkit-animation:anim-right ease .3s; animation:anim-right ease .5s; }
.left:hover { background-color:#68D9EE; -webkit-animation:anim-left ease .5s; animation:anim-left ease .5s; }
.int { display:none; }
/*INPUT PLAY&STOP&PAUSE CHECKED*/
#play:checked ~ .brain .cont .menu { margin-top:16px; }
#play:checked ~ .brain .cont .menu .hidePause { visibility:hidden; }
#play:checked ~ .brain .cont .menu .butPlay { visibility:hidden; }
#play:checked ~ .brain .cont .menu .hidePlay { visibility:visible; }
#play:checked ~ .brain .cont .aline { visibility:visible; }
#play:checked ~ .brain .cont .but .select_but > div { display:block; }
#play:checked ~ .brain .cont .aline .line { -webkit-animation:linew 16s ease-out infinite; animation:linew 16s ease-out infinite; }
#play:checked ~ .brain .cont .image { -webkit-animation:alls 16s linear infinite; animation:alls 16s linear infinite; }
#play:checked ~ .brain .cont .but .select1 > div { -webkit-animation:sel1 16s linear infinite; animation:sel1 16s linear infinite; }
#play:checked ~ .brain .cont .but .select2 > div { -webkit-animation:sel2 16s linear infinite; animation:sel2 16s linear infinite; }
#play:checked ~ .brain .cont .but .select3 > div { -webkit-animation:sel3 16s linear infinite; animation:sel3 16s linear infinite; }
#play:checked ~ .brain .cont .but .select4 > div { -webkit-animation:sel4 16s linear infinite; animation:sel4 16s linear infinite; }
#stop:checked ~ .brain .cont .menu .butPause { visibility:hidden; }
#stop:checked ~ .brain .cont .menu .butStop { visibility:hidden; }
#stop:checked ~ .brain .cont .menu .hideStop { visibility:visible; }
/*#stop:checked ~ .brain .cont .aline .line { width:0; -webkit-animation:none; animation:none; }
*/
#pause:checked ~ .brain .cont .menu .butPause { visibility:hidden; }
#pause:checked ~ .brain .cont .but .select_but > div { display:block; }
#pause:checked ~ .brain .cont .aline { visibility:visible; }
#pause:checked ~ .brain .cont .menu { margin-top:16px; }
#pause:checked ~ .brain .cont .line { -webkit-animation:linew 16s linear infinite; animation:linew 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .image { -webkit-animation:alls 16s linear infinite; animation:alls 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select1 > div { -webkit-animation:sel1 16s linear infinite; animation:sel1 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select2 > div { -webkit-animation:sel2 16s linear infinite; animation:sel2 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select3 > div { -webkit-animation:sel3 16s linear infinite; animation:sel3 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select4 > div { -webkit-animation:sel4 16s linear infinite; animation:sel4 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
/*INPUT MANAGE&PAGINATION CHECKED*/
#slide1:checked ~ .brain .cont .but .select1 > div { display:block; }
#slide1:checked ~ .brain .manage_one { display:inline-block; }
#slide2:checked ~ .brain .cont .image { margin-left:-100%; }
#slide2:checked ~ .brain .manage_two { display:inline-block; }
#slide2:checked ~ .brain .cont .but .select2 > div { display:block; }
#slide3:checked ~ .brain .cont .image { margin-left:-200%; }
#slide3:checked ~ .brain .manage_tre { display:inline-block; }
#slide3:checked ~ .brain .cont .but .select3 > div { display:block; }
#slide4:checked ~ .brain .cont .image { margin-left:-300%; }
#slide4:checked ~ .brain .manage_for { display:inline-block; }
#slide4:checked ~ .brain .cont .but .select4 > div { display:block; }
/*ANIMATION*/
@-webkit-keyframes tool {
    0% { opacity:0; margin-left:-400%; } 15% { opacity:.8; margin-left:-94px; } 17% { margin-left:-126px; } 19% { margin-left:-94px; } 21% { margin-left:-104px; } 23% { margin-left:-94px; } 95% { opacity:.8; } 100% { opacity:.0; margin-left:-94px; visibility:hidden; }
}
@keyframes tool {
    0% { opacity:0; margin-left:-400%; } 15% { opacity:.8; margin-left:-94px; } 17% { margin-left:-126px; } 19% { margin-left:-94px; } 21% { margin-left:-104px; } 23% { margin-left:-94px; } 95% { opacity:.8; } 100% { opacity:.0; margin-left:-94px; visibility:hidden; }
}
/*ANIMATION SLIDE&LINE*/
@-webkit-keyframes linew {
    0% { width:0; } 25% { width:25%; } 50% { width:50%; } 75% { width:75%; } 100% { width:100%; }
}
@-webkit-keyframes alls {
    0% { margin-left:0; } 23% { margin-left:0; -webkit-filter:blur(0px); } 24% { -webkit-filter:blur(10px); } 25% { margin-left:-100%; -webkit-filter:blur(0px); } 48% { margin-left:-100%; -webkit-filter:blur(0px); } 49% { -webkit-filter:blur(10px); } 50% { margin-left:-200%; -webkit-filter:blur(0px); } 73% { margin-left:-200%; -webkit-filter:blur(0px); } 74% { -webkit-filter:blur(10px); } 75% { margin-left:-300%; -webkit-filter:blur(0px); } 98% { margin-left:-300%; -webkit-filter:blur(0px); } 99% { -webkit-filter:blur(10px); } 100% { margin-left:0; -webkit-filter:blur(0px); }
}
/*ANIMATION PAGINATION*/
@-webkit-keyframes sel1 {
    0% { opacity:1; } 24.9% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel2 {
    0% { opacity:0; } 24.9% { opacity:0; } 25% { opacity:1; } 49.9% { opacity:1; } 50% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel3 {
    0% { opacity:0; } 49.9% { opacity:0; } 50% { opacity:1; } 74.9% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel4 {
    0% { opacity:0; } 74.9% { opacity:0; } 75% { opacity:1; } 99.9% { opacity:1; } 100% { opacity:0; }
}
/*ANIMATION MANAGE*/
@-webkit-keyframes anim-right {
    0% { background-position:0 0; } 49.9% { background-position:64px 0; } 50% { display:none; background-position:-64px; } 50.1% { background-position:-64px; } 100% { background-position:0 0; }
}
@-webkit-keyframes anim-left {
    0% { background-position:0 0; } 49.9% { background-position:-64px 0; } 50% { display:none; background-position:64px; } 50.1% { background-position:64px; } 100% { background-position:0 0; }
}
@keyframes linew {
    0% { width:0; } 25% { width:25%; } 50% { width:50%; } 75% { width:75%; } 100% { width:100%; }
}
@keyframes alls {
    0% { margin-left:0; } 23% { margin-left:0; } 25% { margin-left:-100%; } 48% { margin-left:-100%; } 50% { margin-left:-200%; } 73% { margin-left:-200%; } 75% { margin-left:-300%; } 98% { margin-left:-300%; } 100% { margin-left:0; }
}
@keyframes sel1 {
    0% { opacity:1; width:10px; height:10px; border-radius:5px; } 24.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 25% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel2 {
    0% { opacity:0; } 24.9% { opacity:0; } 25% { opacity:1; width:10px; height:10px; border-radius:5px; } 49.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 50% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel3 {
    0% { opacity:0; } 49.9% { opacity:0; } 50% { opacity:1; width:10px; height:10px; border-radius:5px; } 74.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 75% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel4 {
    0% { opacity:0; } 74.9% { opacity:0; } 75% { opacity:1; width:10px; height:10px; border-radius:5px; } 99.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 100% { opacity:0; }
}
@keyframes anim-right {
    0% { background-position:0 0; } 49.9% { background-position:64px 0; } 50% { display:none; background-position:-64px; } 50.1% { background-position:-64px; } 100% { background-position:0 0; }
}
@keyframes anim-left {
    0% { background-position:0 0; } 49.9% { background-position:-64px 0; } 50% { display:none; background-position:64px; } 50.1% { background-position:64px; } 100% { background-position:0 0; }
}
/*TRANSITION*/
.image,.menu { -webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -ms-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; }
.int { -webkit-transition:background-color 300ms ease-in-out; -moz-transition:background-color 300ms ease-in-out; -ms-transition:background-color 300ms ease-in-out; -o-transition:background-color 300ms ease-in-out; transition:background-color 300ms ease-in-out; }
@media screen and (max-width:900px) {
    .right,.left { width:50px; height:50px; }
}
@media screen and (max-width:700px) {
    .right,.left { width:30px; height:30px; }
}
@media screen and (max-width:430px) {
    .right,.left { width:20px; height:20px; } .icon > img { width:34px; height:34px; }
}
input { display:none; }
p { font-family:Calibri; text-align:center; font-size:.8em; }
a { color:#FC8570; font-weight:bold; text-decoration:none; }
strong { color:#FFE000; }
.wrapper { height:100%; width:100%; }
.brain { text-align:center; margin:0 auto; } 

HTML 

<div class="out-wrapper">
<div class="wrapper">

 <!--  INPUT FOR BUTTON SELECT SLIDE -->
 <input type="radio" name="next" id="slide1" checked>
 <input type="radio" name="next" id="slide2">
 <input type="radio" name="next" id="slide3">
 <input type="radio" name="next" id="slide4">
 <!--  INPUT FOR BUTTON STOP&PLAY -->
 <input type="radio" name="sto" id="play">
 <input type="radio" name="sto" id="stop" checked>
 <input type="radio" name="sto" id="pause">

<div class="brain">
 <label for="slide4" class="int manage_one left"></label>
 <label for="slide2" class="int manage_one right"></label>
 <label for="slide1" class="int manage_two left"></label>
 <label for="slide3" class="int manage_two right"></label>
 <label for="slide2" class="int manage_tre left"></label>
 <label for="slide4" class="int manage_tre right"></label>
 <label for="slide3" class="int manage_for left"></label>
 <label for="slide1" class="int manage_for right"></label>
  <!-- CONTAINER -->
  <div class="cont">
   <!-- BUTTON PLAY&STOP -->
   <div class="menu">
    <label for="stop" class="butStop" onclick=""></label>
    <label for="play" class="butPlay" onclick=""></label>
    <label for="pause" class="butPause" onclick=""></label>
    <span class="hideStop"></span>
    <span class="hidePlay"></span>
    <span class="hidePause"></span>
    <span class="tooltip"><p>Control buttons!</p></span>
   </div>
   <!-- IMAGE -->
   <div class="image">
    <img src="http://s017.radikal.ru/i432/1310/37/f331c96eef02.jpg" class="oneP"  alt="Flash">
    <img src="http://s004.radikal.ru/i208/1310/09/7a8e37a9e719.jpg" class="twoP"  alt="Superman">
    <img src="http://s020.radikal.ru/i713/1310/5f/a15fcdeb8fe8.jpg" class="threeP"  alt="Team">
    <img src="http://s019.radikal.ru/i639/1310/02/1e3d78802280.jpg" class="fourP"  alt="Joker">
   </div>
   <!-- ANIMATION LINE -->
   <div class="aline">
    <div class="line"></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
   </div>
   <!-- BOTTOM LINE -->
   <div class="but">
    <label for="slide1" class="select_but select1" onclick=""><div></div></label>
    <label for="slide2" class="select_but select2" onclick=""><div></div></label>
    <label for="slide3" class="select_but select3" onclick=""><div></div></label>
    <label for="slide4" class="select_but select4" onclick=""><div></div></label>
   </div>
  </div>
</div>
</div>
</div>
*Kode warna biru adalah link gambar, silahkan di ganti dan sesuaikan.



Sekian, selamat mencoba. 
0 Komentar untuk "Cara Membuat Image Slider dengan Control Button di Blog"