Adhy Musaad Menulis artikel
@adhymusaad

Tutorial Membuat Slideshow Dengan CSS3 dan Jquery

Tutorial Membuat Slideshow Dengan CSS3 dan Jquery

Membuat Slideshow Dengan Css dan Jqueryitu 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:

<[kwik-adsinhere]>

  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 dengancss.

Struktur HTML

1&lt;section&gt;
2&lt;h3&gt;Opacity Slideshow&lt;/h3&gt;
3&lt;div id="twd_opa" class="shadow"&gt;
4&lt;img class='opaque' src="images/2.jpg" /&gt;
5&lt;img src="images/3.jpg" /&gt;
6&lt;img src="images/7.jpg" /&gt;
7&lt;img src="images/9.jpg" /&gt;
8&lt;/div&gt;
9
10&lt;p id="twd_opa_controls"&gt;
11&lt;span class="selected"&gt;Gambar 1&lt;/span&gt;
12&lt;span&gt;Gambar 2&lt;/span&gt;
13&lt;span&gt;Gambar 3&lt;/span&gt;
14&lt;span&gt;Gambar 4&lt;/span&gt;
15&lt;/p&gt;
16&lt;/section&gt;

div#twd_opadigunakan untuk menampung gambar, sedangkanp#twd_opa_controlsdigunakan untuk menentukan tombol yang bisa diklik agar gambar berganti.

Kode CSS

1/* CSS DEMO 1 */
2p#twd_opa_controls {
3text-align:center;
4}
5#twd_opa_controls span {
6padding-right:2em;
7cursor:pointer;
8}
9#twd_opa {
10position:relative;
11height:429px;
12width:600px;
13margin:0 auto 10px;
14}
15#twd_opa img {
16position:absolute;
17left:0;
18-webkit-transition: opacity1s ease-in-out;
19-moz-transition: opacity1s ease-in-out;
20-o-transition: opacity1s ease-in-out;
21transition: opacity1s ease-in-out;
22opacity:0;
23-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
24filter: alpha(opacity=0);
25}
26
27#twd_opa img.opaque {
28opacity:1;
29-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
30filter: alpha(opacity=1);
31}

Kode Javascript / Jquery

1/* Js DEMO 1 | Opacity Slideshow*/
2$(document).ready(function() {
3$("#twd_opa_controls").on('click','span',function() {
4$("#twd_opa img").removeClass("opaque");
5
6var newImage = $(this).index();
7
8$("#twd_opa img").eq(newImage).addClass("opaque");
9
10$("#twd_opa_controls span").removeClass("selected");
11$(this).addClass("selected");
12});
13});

Flip Slideshow

Flip slideshow akan menampilkan efek pergantian gambar dengan cara bergeser kesamping.

Struktur HTML

1&lt;section&gt;
2&lt;h3&gt;Flip Slideshow&lt;/h3&gt;
3&lt;div id="slide_flip_container" class="shadow"&gt;
4&lt;div id="slide_flip_images" style="transform: translateX(0px);"&gt;
5&lt;img src="images/5.jpg"&gt;
6&lt;img src="images/2.jpg"&gt;
7&lt;img src="images/3.jpg"&gt;
8&lt;img src="images/4.jpg"&gt;
9&lt;/div&gt;
10&lt;/div&gt;
11
12&lt;p id="slide_flip_controls"&gt;
13&lt;span class="selected"&gt;Gambar 1&lt;/span&gt;
14&lt;span&gt;Gambar 2&lt;/span&gt;
15&lt;span&gt;Gambar 3&lt;/span&gt;
16&lt;span&gt;Gambar 4&lt;/span&gt;
17&lt;/p&gt;
18&lt;/section&gt;

CSS

1/* CSS DEMO 2 */
2p#slide_flip_controls {
3text-align:center;
4}
5#slide_flip_controls span {
6padding-right:2em;
7cursor:pointer;
8}
9
10#slide_flip_container {
11height:429px;
12width:600px;
13overflow:hidden;
14margin:0 auto 10px;
15}
16#slide_flip_images {
17/* lebar penampung. karena ada 4 gambar berukuran 600, jadi 4 * 600 = 2400. */
18width:2400px;
19
20-webkit-transition:all 1.0s ease-in-out;
21-moz-transition:all 1.0s ease-in-out;
22-o-transition:all 1.0s ease-in-out;
23transition:all 1.0s ease-in-out;
24}
25#slide_flip_images img {
26padding:0;
27margin:0;
28float:left;/* gambar dibaut float left agar setiap gambar ada dibawah gambar sebelumnya. */
29}

Kode Javascript / Jquery

1/* Js DEMO 2 : Flip Slideshow */
2$(document).ready(function() {
3$('#slide_flip_controls').on('click','span',function(){
4$("#slide_flip_images").css("transform","translateX("+$(this).index() * -600+"px)");
5$("#slide_flip_controls span").removeClass("selected");
6$(this).addClass("selected");
7});
8});

Demo &amp; 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 &amp; Development Indonesia.

0
0 none
Komentar