Membuat slideshow slide: 2016

Membuat Slideshow Dengan Css dan Jquery

pembuatan ini tergolong sangat mudah dan tidak sesulit yang dibayangkan, pada tutorial kali ini akan kita bahas secara singkat cara membuat nya.

Sebuah slide show adalah presentasi dari serangkaian gambar diam pada perangkat layar proyeksi atau layar elektronik, biasanya dalam urutan yang telah diatur sebelumnya. Setiap gambar biasanya ditampilkan setidaknya beberapa detik, dan kadang-kadang selama beberapa menit, sebelum digantikan oleh gambar berikutnya.

Mari kita membuat dengan mengikuti langkah dibawah ini,

Flip Slideshow

Flip slideshow akan menampilkan efek pergantian gambar dengan cara bergeser kesamping.

Struktur HTML

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.12.2.min.js"></script>
 <title>201453102</title> 
 <style type="text/css">  
  #ck_slide{
   margin: 50px auto;
   width: 800px; 
   height: 500px; 
  }
  #ck_slide > div { 
   position: absolute;    
  }
  img{
   width: 800px;
   height: 500px; 
  }
 </style>
</head>
<body>
 <div id="ck_slide">
  <div>
   <img src="1.jpg" alt="1">
  </div>
  <div>
   <img src="2.jpg" alt="2">
  </div>
  <div>
   <img src="3.jpg" alt="3">
  </div>
<script>
 $(document).ready(function(){
  $("#ck_slide > div:gt(0)").hide();
   setInterval(function() { 
   $('#ck_slide > div:first')
   .fadeOut(5)
   .next()
   .fadeIn(4)
   .end()
   .appendTo('#ck_slide');
  },  3000);
 });
</script>
</body>
</html>

Membuat slideshow slide

Jumat, 09 Desember 2016

Jumat, 10 Juni 2016

Membuat Slideshow Dengan Css dan Jquery