Cara Membuat Image Slideshow Pada Web
Saat ini untuk membuat image slideshow, terdapat banyak pilihan library yang dapat kita gunakan. Seperti dengan menggunakan s3slider, coinslider, wowslide, flexslider dan masih banyak lainnya.
Pada tutorial image slideshow yang akan kita buat, kita akan menggunakan library dari wowslider. Karena wowslider sendiri mengfokuskan diri untuk pembuatan image slideshow yang sangat beragam modelnya. Bahkan anda dapat mencoba software wowslider, setelah itu akan digenerate ke dalam bentuk dokumen html.
Kita akan membuat image slideshow untuk kebutuhan image gallery seperti yang ditunjukkan oleh Gambar. dibawah ini :
Membuat image slideshow dengan wowslider
Dalam contoh yang disajikan, secara umum interface menggunakan library bootstrap. Sedangkan untuk animasi dari image slideshow menggunakan wowslider. Kesemua library tersebut terdapat pada bagian link download paling bawah.Berikut ini adalah script lengkap dalam membuat image slideshow :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Imageslideshow</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<link rel="stylesheet" type="text/css" href="wowslider/style.css" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Akhir dari Bagian css -->
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="wowslider/jquery.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://dtc-eng.blogspot.co.id/">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Learn French</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<!-- part of slideshow -->
<div class = "container">
<div class="row">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading">Image Gallery</div>
<div class="panel-body">
<!-- Start WOWSlider.com BODY section -->
<!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="img/dashboard1.png" style="width:425px; height:300px;" id="wows1_0"/></li>
<li><img src="img/tabel1.png" style="width:425px; height:300px;" id="wows1_1"/></a></li>
<li><img src="img/agenda1.png" style="width:425px; height:300px;" id="wows1_2"/></li>
</ul>
</div>
<div class="ws_script" style="position:absolute"></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
</div>
</div>
</div>
</div>
<!-- end of part slideshow -->
</body>
</html>Jika ingin merubah ukuran gambar, maka cukup lakukan teknik css secara inline seperti script diatas :
<img src="img/dashboard1.png" style="width:425px; height:300px;" id="wows1_0"/>. Anda tinggal merubah ukuran width dan height-nya.Jika ukuran gambar yang anda rubah terlalu besar, dan terkesan tidak berubah ukurannya. Hal ini diakibatkan karena pada contoh mengeset :
<div class="col-md-5">. Jadi anda dapat memodifikasinya menjadi : <div class="col-md-6"> atau <div class="col-md-7"> dsb. Maksimalnya adalah : <div class="col-md-12">.
