Selamat Datang

Tutorial Membuat Slideshow Dengan CSS3 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.

slideshow-jquery-css

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

Demo & Download

Opacity Slideshow | Flip Slideshow | Download Script on Github

Sekian tutorial kali ini, selamat mencoba dan membuat slideshow sendiri untuk website anda. Jika ada pertanyaan silahkan tuliskan komentar.

Salam Web Design & Development Indonesia.

Image Credit: Gem Fletcher





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

48 thoughts on “Tutorial Membuat Slideshow Dengan CSS3 dan Jquery

  1. Afnizar Nur Ghifari says:

    Kalo biar otomatis play, tanpa diklik sendiri gimana ?

  2. Erstwhil says:

    gan, sama kyk penanya diatas, biar slidenya otomatis berganti tanpa harus diklik bagaimana ya?

    • Pelajari CSS Animation dengan menggunakan keyframe, dan nanti tambahin kode kira2 kayak gini, silahkan dikembangkan sendiri
      —-
      @keyframes twd_opa_FadeInOut {
      0% {
      opacity:1;
      }
      17% {
      opacity:1;
      }
      25% {
      opacity:0;
      }
      92% {
      opacity:0;
      }
      100% {
      opacity:1;
      }
      }

      #twd_opa img:nth-of-type(1) {
      animation-delay: 6s;
      }
      #twd_opa img:nth-of-type(2) {
      animation-delay: 4s;
      }
      #twd_opa img:nth-of-type(3) {
      animation-delay: 2s;
      }
      #twd_opa img:nth-of-type(4) {
      animation-delay: 0;
      }

  3. Cara Cakra says:

    klo dimasukin link didalam fotonya bisa tidak gan?

  4. aziz says:

    gan gimana caranya biar otomatis slide nya keganti?. mohon infonya gan?.

  5. rewako says:

    maaf mas ijin beljar, btw klo sy ingin membuat ket menu slide show nya berada di samping dan bersusun kebawah itu gmna ya? sy udah coba edit2 tp blum ketemu, masih awam untuk jquery mas…hehe
    Thx 4 replay

  6. akhirnya nemu juga tutorialnya, udah cari kemana-mana tenyata google mengarahkan ke artikel agan ini…
    thanks gan infonya

  7. adhe says:

    sya udh coba gan, tpi koq mlah ga2l….
    solusix gimna tu…?

  8. mastel says:

    klo contak langsung ke no tlp.mana yah

  9. fahrul says:

    gan ane sudah bisa buat jalan otomatis,, trus untuk menambahkan img lebih dari 4,,, niatnya buat 5, gimana yaa ane buntu nih.. thank’s twd
    ane pake ini
    @-moz-keyframes slideshow {
    0%, 10%, 100% { margin-left: 0; }
    20%, 30% { margin-left: -1200px;}
    40%, 50% { margin-left: -2400px;}
    60%, 70% { margin-left: -3600px;}
    80% {margin-left: 0;}
    }

  10. syahril says:

    min
    kalo slideshow nya bisa di taro di header gimana y

  11. KevinZ says:

    terima kasih, adek saya yang minta comot dari sini buat referensi :D
    makasih gan

    kunjungan balik ya :D
    dirumah saya -> http://www.kevinsource.blogspot.com

  12. irvan says:

    gan
    ane udah copas code nya tapi kok g work

  13. Fahmi says:

    mas, kalau tombolnya di ganti nex sama prev bagaimana? terimakasih :D

  14. rochmat says:

    thanks gan tutorialnya, untk yg otomatisnya hanya perlu nambahkan cssnya yg diatas ya gan, coba dulu deh. :)

  15. nurul hasan says:

    terima kasuh banyak gan, tapi sayang, ane masih bingung cara nggunainya,,,,

  16. islamedica says:

    makasih mas, keren ni kalo diterapkan

  17. link downloadnya kok gk bisa mas…
    Terimakasih sekali jika ada link downloanya.

  18. terimakasih atas petunjuknya…. sangat bermanfaat :) TWD

  19. Arief Rachman says:

    kalo kita buat tombol next / previous caranya gmn ya mas?

  20. hilmynu says:

    Maaf. mas itu kalo dipasang di blogger bisa gak? caranya gimana?
    Terima kasih

  21. Heru says:

    Maaaf gan numpang Tanya ? dan Mohon Penjelasan nya,, Kalo Biar Play Otomatis Kita Perlu Menambahka Apa Yaah ???

  22. Kok gagal terus ya -_-

  23. ardi wahyu s says:

    mas itu jquerynya dibuat file .js ato masuk di html?

  24. dewidero says:

    gans kenap gak ada tab followers aku jadinya gak bisa mengikutinya

  25. dewidero says:

    gan itu untuk blogger bisa?

  26. niki rahmadi says:

    gan klo mau di tambah tombol next & prev, bisa gk….

    contoh nya gmna gan ?

  27. Toni says:

    Lumayan banyak juga script untuk membuat slideshow ini. Kalau dipasang di sidebar blog wordpress apakah script akan tetap jalan ya ?
    Terima kasih

  28. syam says:

    mau nanya??
    bgaimana penerapan slideshow di atas menggunakan mysql..??
    sehingga setiap pengupdatan gambar atau content bisa ditampilkan berdasarkan DESC.
    makasih

  29. jo says:

    mas brow, ini aku udah coba buat yang jalan sendiri tapi masih g bisa mulu mas… mohon pencerahannya mas…

    klo bisa tolong di email ke emailq aja yah mas. mksih

  30. kangmas says:

    uke, makasih tutorialnya..

  31. yudha says:

    Mas gmn caranya biafr slideshownya otomatis tanpa di klik?\?

  32. Lintang says:

    wahhh bermanfaat bnget mas scriptnya
    ijin comot ya…..
    :3

  33. Zuhdi ABE says:

    ga bisa gerak sendiri ya slideshownya mas?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development