Saya akan membagikan tutorial membuat Image Slider pada Web Html. Image Slider tentu akan mempercantik tampilan we html kita bukan? maka dari itu mari kita pelajari bagaimana membuat image slide dengan mudah.
Saya akan membuat image slider ini dengan javascript dan Css.
Beberapa tools yang kita butuhkan :
- Bootstrap.
- Jquery.
- Notepad++.
Baiklah mari kita mulai lagkah-langkahnya.
- Jalankan aplikasi Notepad++.
- Simpan dokumen dengan nama yang anda kehendaki, namun ingat format penyimpanan dokumen harus bersifat .html atau bisa langsung anda simpan dengan format all files yang secara otomatis menjadi dokumen HTML.
- Sekarang mari kita buat scriptnya. Anda bisa langsung meng-copy paste script yang ada dibawah ini dan ubah nama sesuai nama dokumen anda masing-masing.
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Images Slideshow Pada Dokumen HTML </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-min.js" type="text/javascript"></script>
<script src="js/s3slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
<body>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/1.jpg" alt="1" style="border:0;"/></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/2.jpg" alt="2" style="border:0;" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/3.jpg" alt="3" style="border:0;" /></a>
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/4.jpg" alt="4" style="border:0;" /></a>
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/5.jpg" alt="5" style="border:0;" /></a>
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
</body>
</html>
<html>
<head>
<title> Cara Membuat Images Slideshow Pada Dokumen HTML </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-min.js" type="text/javascript"></script>
<script src="js/s3slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
<body>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/1.jpg" alt="1" style="border:0;"/></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/2.jpg" alt="2" style="border:0;" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/3.jpg" alt="3" style="border:0;" /></a>
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/4.jpg" alt="4" style="border:0;" /></a>
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.kurniadwisandra.blogspot.com" target="_blank" style="outline:none;"><img src="images/5.jpg" alt="5" style="border:0;" /></a>
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
</body>
</html>
Sign up here with your email