Membuat Slideshow Dengan Css dan Jquery

Membuat Slideshow Dengan Css dan Jquery itu 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.

Ada 2 model slideshow yang akan kita buat disini:

1. Opacity Slideshow (proses pergantian gambar yang menghilang perlahan dan berganti).
2. Flip Slideshow (proses pergantian bergeser kesamping).

Opacity Slideshow

Opacity Slideshow akan menampilkan efek pergantian gambar yang secara perlahan menghilang dan digantikan dengan gambar baru, ini bisa dibuat dengan memanfaatkan opacity yang diatur dengan css.

Struktur HTML

 <section>
  <h3>Opacity Slideshow</h3>
  <div id="twd_opa" class="shadow">
   <img class='opaque' src="images/2.jpg" />
   <img src="images/3.jpg" />
   <img src="images/7.jpg" />
   <img src="images/9.jpg" />
  </div>

  <p id="twd_opa_controls">
   <span class="selected">Gambar 1</span>
   <span>Gambar 2</span>
   <span>Gambar 3</span>
   <span>Gambar 4</span>
  </p>
 </section>

div#twd_opa digunakan untuk menampung gambar, sedangkanp#twd_opa_controls digunakan untuk menentukan tombol yang bisa diklik agar gambar berganti.

Kode CSS

/* CSS DEMO 1 */
p#twd_opa_controls {
  text-align:center;
}
#twd_opa_controls span {
  padding-right:2em;
  cursor:pointer;
}
#twd_opa {
  position:relative;
  height:429px;
  width:600px;
  margin:0 auto 10px;
}
#twd_opa img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#twd_opa img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

Kode Javascript / Jquery

/* Js DEMO 1 | Opacity Slideshow*/
$(document).ready(function() {
  $("#twd_opa_controls").on('click', 'span', function() {
    $("#twd_opa img").removeClass("opaque");

    var newImage = $(this).index();

    $("#twd_opa img").eq(newImage).addClass("opaque");

    $("#twd_opa_controls span").removeClass("selected");
    $(this).addClass("selected");
  });
});

Flip Slideshow

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

Struktur HTML

  <section>
    <h3>Flip Slideshow</h3>
    <div id="slide_flip_container" class="shadow">
      <div id="slide_flip_images" style="transform: translateX(0px);">
        <img src="images/5.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
        <img src="images/4.jpg">
      </div>
    </div>

    <p id="slide_flip_controls">
      <span class="selected">Gambar 1</span>
      <span>Gambar 2</span>
      <span>Gambar 3</span>
      <span>Gambar 4</span>
    </p>
  </section>

CSS

/* CSS DEMO 2 */
p#slide_flip_controls {
  text-align:center;
}
#slide_flip_controls span {
  padding-right:2em;
  cursor:pointer;
}

#slide_flip_container {
  height:429px;
  width:600px;
  overflow:hidden;
  margin:0 auto 10px;
}
#slide_flip_images {
  /* lebar penampung. karena ada 4 gambar berukuran 600, jadi 4 * 600 = 2400. */
  width:2400px;

  -webkit-transition:all 1.0s ease-in-out;
  -moz-transition:all 1.0s ease-in-out;
  -o-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out;
}
#slide_flip_images img {
  padding:0;
  margin:0;
  float:left; /* gambar dibaut float left agar setiap gambar ada dibawah gambar sebelumnya. */
}

Kode Javascript / Jquery

/* Js DEMO 2 : Flip Slideshow */
$(document).ready(function() {
  $('#slide_flip_controls').on('click', 'span', function(){
    $("#slide_flip_images").css("transform","translateX("+$(this).index() * -600+"px)");
    $("#slide_flip_controls span").removeClass("selected");
    $(this).addClass("selected");
  });
});

Selamat mencoba!