Cara membuat slideshow sederhana
kali ini saya ingin berbagi tentang konsep sederhana dalam pembuatan sebuah slideshow. Tutorial membuat slideshow kali ini merupakan kerangka yang sangat simple mudah di modifikasi, dan sangat ringan karena penggunaan javascriptnya relative kecil.
Konsep HTML :
<div class='container'>
<div class='slider active'>
<h2>Kontent 1</h2>
</div>
<div class='slider demo'>
<h2>Kontent 2</h2>
</div>
<div class='slider'>
<h2>Kontent 3</h2>
</div>
<div class='slider demo'>
<h2>Kontent 4</h2>
</div>
</div>
Konsep CSS :
.slider {
display : none;
border: 1px solid #bdbdbd;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #e0e0e0;
padding: 35px;
min-height: 125px;
}
.slider.active {
display : block
}
.slider.demo {
background : pink;
}
Javascript :
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slider"); // nama class
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 3000); //3 detik
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.slider {
display : none;
border: 1px solid #bdbdbd;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #e0e0e0;
padding: 35px;
min-height: 125px;
}
.slider.active {
display : block
}
.slider.demo {
background : pink;
}
</style>
</head>
<body>
<div class='container'>
<div class='slider active'>
<h2>Kontent 1</h2>
</div>
<div class='slider demo'>
<h2>Kontent 2</h2>
</div>
<div class='slider'>
<h2>Kontent 3</h2>
</div>
<div class='slider demo'>
<h2>Kontent 4</h2>
</div>
</div>
<script>
//<![CDATA[
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slider"); // nama class
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 3000); //3 detik
}
//]]>
</script>
</body>
</html>
Posting Komentar