Create an image slideshow on a webpage
We have many options to create the image slideshow. We can use s3slider, coinslider, wowslider, flexslider, owlslider, flexslider, bootstrap carousel and many others.
In the tutorial of image slideshow that we'll create, we use the library of wowslider. It is because of wowslider have many models in building an image slideshow. Not like the other library, Wowslider is available in software (support for windows and mac). So that you can install and create the model of image slideshow that you want and you can test it and publish it on a local drive in any test folder. Then you can copy some code to insert your webpage.
In here, we will make image slideshow for the image gallery as show by the figure.1 below :
 |
| Fig.1 |
Create image slideshow by using wowslider
In the example presented, in the generall the interface that we use is Bootstrap as front-end. While for the animation of image slideshow using wowslide. You can download all of the libray both Bootstrap and Wowslider in the link download.Here is a complete code to create the 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>If you want to resize the image, do it in the way inline css like the script above : <img src="img/dashboard1.png" style="width:425px; height:300px;" id="wows1_0"/>. You just change the size of width and height.
If you change the size of image is too great and it seems not chage at all. It is because the example above we use space that limits the size of image :<div class="col-md-5">. It is a boostrap code, so change it to : <div class="col-md-6"> or <div class="col-md-7"> or <div class="col-md-8"> etc. The maximum is <div class="col-md-12">.
