Script Website Untuk Membuat Slideshow sederhana

Untuk Mempercantik Sebuah Website memang perlu design yang menarik minat pengunjung, untuk website modern zaman sekarang terutama untuk Web yang berbentuk Portal Berita dan Gallery  Memakai Slide Show di Halaman Utama, sebetulnya ada dua cara untuk memakai slide show, bisa memakai plugin ajax, jquery dan script sederhana manual html, bagai pemula harus tahu dulu script dasar pembuatan slide show. oke langsung saja kita buat, dan sedot scriptnya

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>

<divid="twd_opa"class="shadow">

<imgclass='opaque'src="images/2.jpg"/>

<imgsrc="images/3.jpg"/>

<imgsrc="images/7.jpg"/>

<imgsrc="images/9.jpg"/>

</div>
<pid="twd_opa_controls">
<spanclass="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:0auto10px;

}

#twd_opa img {

 position:absolute;

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

varnewImage = $(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>

 <divid="slide_flip_container"class="shadow">

 <divid="slide_flip_images"style="transform: translateX(0px);">

<imgsrc="images/5.jpg">
<imgsrc="images/2.jpg">

<imgsrc="images/3.jpg">

<imgsrc="images/4.jpg">

</div>
</div>

<pid="slide_flip_controls">

<spanclass="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:0auto10px;

}

#slide_flip_images {

  /* lebar penampung. karena ada 4 gambar berukuran 600, jadi 4 * 600 = 2400. */

 width:2400px;

-webkit-transition:all1.0s ease-in-out;
 -moz-transition:all1.0s ease-in-out;

 -o-transition:all1.0s ease-in-out;

 transition:all1.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");

 });

});

------------------------------------------------------------------------------------------------------------