Pure css image slider merupakan aplikasi widget untuk website atau blog yang berfungsi menampilkan gambar atau foto secara otomatis secara bergantian dan berurutan. selain berfungsi untuk memperindah tampilan blog, image slider ini juga informatif karena dapat menyampaikan beberapa informasi penting yang dikemas dalam sekumpulan image sehingga dapat mempermudah user untuk melihat gambar tersebut secara berurutan dan responsive pengaturan slider ini lebih detailnya dapat dikembangkan dengan kode Css baik untuk ukuran gambar, warna background, dan besar atau kecilnya ukuran text semuanya diatur dengan css. berikut ini adalah Demo Image Slider yang dibuat dengan Css

Kode CSS nya pun sangat simple tidak terlalu banyak kodenya

@-webkit-keyframes fade {
0% { opacity:0; -webkit-transform:translate(180px,60px) scale(2.00); }
15% { opacity:1; -webkit-transform:translate(80px,160px) scale(1.80); }
30% { opacity:0.5; -webkit-transform:translate(40px,80px) scale(1.40); }
40% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.00); }
100% { opacity:0; }
}
@-moz-keyframes fade {
0% { opacity:0;-moz-transform:translate(180px,60px) scale(2.00);  }
15% { opacity:1;-moz-transform:translate(80px,160px) scale(1.80); }
30% { opacity:0.5;-moz-transform:translate(40px,80px) scale(1.40); }
40% { opacity:0;-moz-transform:translate(0px,0px) scale(1.00); }
100% { opacity:0; }
}
#CSS3Slideshow, #CSS3Slideshow img {position:absolute;}
#CSS3Slideshow {
overflow:hidden;
left:28%;
width:600px;
height:300px;
margin:30px 0px 0px -168px;
padding:0px;
border: 16px solid #f6f6f6;
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
#CSS3Slideshow img { opacity:0; -webkit-animation:fade 24s linear infinite; -moz-animation:fade 24s linear infinite; }
#CSS3Slideshow .img2 { -webkit-animation-delay:6s; -moz-animation-delay:6s;}
#CSS3Slideshow .img3 { -webkit-animation-delay:12s; -moz-animation-delay:12s;}
#CSS3Slideshow .img4 { -webkit-animation-delay:18s; -moz-animation-delay:18s;}

Kode HTML nya adalah seperti dibawah ini:

<div id="CSS3Slideshow" style="position: relative;">
<img alt="pure css" class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6y2_SvQ6GzNwVf5nDExTZcszYSSgYieVXEa4hE7vH2GBb2w0dElO0NDAZaMikBEl1yICRPdLZ5nDYLxwzW1bmiQkPklAa3DXojfaBRbs2ZNHv2iF1sXE-8DA74NFteGv8FrAqAsGSR8/s1600/franchise.png" />
  <img alt="image slider" class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-1axFTYR2EOoLBxFhDHZ7oGHn-AQv2sWZoOLhst9luJPktlG0KaEBfzFQFUVkKsNIrlSTlb7s3L78B8MIIcvGtX6vMWt8VRKTwsyhNDSl8LkijxWCAx2DjrUrMC8XdqBxAKg-1hXzPqQ/s1600/internet+marketing.png" />
  <img alt="auto slide" class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkvRnQsZ8lriHuoGfK_QRkjROHzNALr2GZrqKNkHt9o1aJukWPfTPJPwQ0xUZGwM10EHN-dvl4V_cI02fOIvsij5KbclOQgr2unx9K9hG5gixROwDielyPUEV1wLXD9pMdL4oFalbsOg/s1600/taufan-graphic-design.png" />
  <img alt="no javascript" class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNROc-1hb73ipOEn4m38yhHAY6QzmC7c7MtnqNl_vRRbI4oMs-P4J3s9bLBQO2SouYe74Ptoog2W70Qao7mUDlx7ExSgjslIZL-7ZNgmUsqrJnctcQx8fvUOZoENPGL_H2uMJ-ODkOTO4/s1600/waralaba.png" />
 </div>

keterangan:
Text biru muda: ganti text yang berwarna biru muda dengan url gambar kamu.
Text Kuning: ukuran slide box bisa diganti sesuai dengan ukuran gambar yang kamu inginkan.

oke cukup sekian dulu ya, pure css Image slider tanpa javascript kodenya cuma sedikit hasilnya sip untuk mempercantik blog atau website
semoga dapat bermanfaat!