CARA MEMBUAT SLIDER SHOW

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, sedangkan p#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");
  });
});

CARA MEMBUAT SLIDER SHOW