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:
- Opacity Slideshow (proses pergantian gambar yang menghilang perlahan dan berganti).
- 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
Kalo biar otomatis play, tanpa diklik sendiri gimana ?
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;
}
thx gan, gw coba dulu
mas code ini di pasang di css nya di seblah mana ? soalnya saya masih belajar
Download aja contohnya, trus liat cara penggunaan kode nya
klo dimasukin link didalam fotonya bisa tidak gan?
gan gimana caranya biar otomatis slide nya keganti?. mohon infonya gan?.
sudah dijawab diatas dengan pertanyaan yang sama
masih kurang ngerti gan -_-. maaf ya masih baru nih.
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
akhirnya nemu juga tutorialnya, udah cari kemana-mana tenyata google mengarahkan ke artikel agan ini…
thanks gan infonya
sya udh coba gan, tpi koq mlah ga2l….
solusix gimna tu…?
klo contak langsung ke no tlp.mana yah
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;}
}
Coba kamu pelajari ini :)
agak dimodifikasi aja, intinya buat div menjadi panjang, lalu teknik untuk slidenya ikutin cara itu
http://pepsized.com/how-to-create-a-responsive-css-only-slider/
mas itu codenya ditaruh dimana ya di jsnya makasih
Js bisa di taro di head, bisa juga di bagian bawah sebelum body
min
kalo slideshow nya bisa di taro di header gimana y
tinggal taro koding nya di header nya
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
gan
ane udah copas code nya tapi kok g work
ndak tau, mungkin kamu salah, itu di demo work kok, download aja script nya, kan sudah di taro di github
mas, kalau tombolnya di ganti nex sama prev bagaimana? terimakasih :D
thanks gan tutorialnya, untk yg otomatisnya hanya perlu nambahkan cssnya yg diatas ya gan, coba dulu deh. :)
terima kasuh banyak gan, tapi sayang, ane masih bingung cara nggunainya,,,,
makasih mas, keren ni kalo diterapkan
link downloadnya kok gk bisa mas…
Terimakasih sekali jika ada link downloanya.
Link download nya ada dibagian bawah, di github ada di kanan bawah
terimakasih atas petunjuknya…. sangat bermanfaat :) TWD
kalo kita buat tombol next / previous caranya gmn ya mas?
Maaf. mas itu kalo dipasang di blogger bisa gak? caranya gimana?
Terima kasih
Maaaf gan numpang Tanya ? dan Mohon Penjelasan nya,, Kalo Biar Play Otomatis Kita Perlu Menambahka Apa Yaah ???
Kok gagal terus ya -_-
mas itu jquerynya dibuat file .js ato masuk di html?
Download aja liat sendiri script nya :)
gans kenap gak ada tab followers aku jadinya gak bisa mengikutinya
gan itu untuk blogger bisa?
gan klo mau di tambah tombol next & prev, bisa gk….
contoh nya gmna gan ?
Lumayan banyak juga script untuk membuat slideshow ini. Kalau dipasang di sidebar blog wordpress apakah script akan tetap jalan ya ?
Terima kasih
mau nanya??
bgaimana penerapan slideshow di atas menggunakan mysql..??
sehingga setiap pengupdatan gambar atau content bisa ditampilkan berdasarkan DESC.
makasih
Untuk hal tersebut kamu harus mempelajari PHP dan MySQL, harus mengerti cara (CRUD) Create, Read, Update, Delete dengan PHP dan MySQL.
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
coba kamu gunakan plugin yg sudah ada ini -> httx://www.woothemes.com/flexslider/
uke, makasih tutorialnya..
Mas gmn caranya biafr slideshownya otomatis tanpa di klik?\?
wahhh bermanfaat bnget mas scriptnya
ijin comot ya…..
:3
ga bisa gerak sendiri ya slideshownya mas?
akhirnya nemu juga tutorialnya, udah cari kemana-mana tenyata google mengarahkan ke artikel agan ini…
thanks gan infonya
makasih ya sob
gan itu untuk blogger or wordpres ?
Itu hanya HTML statis, namun jika bisa menggunakannya, itu bisa untuk blogger dan wordpress.
ko kalo di taro bukan di index ga mau yaa knapa?
mohon info gan newbie
ajarin dong cara penggunakan skrip ini
mnta ptunjuk’a dong min tntang penggunaannya