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

  <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");

  });

});