Demo.
Paparan HTML dari slider gambar di atas. Copy/paste. Tukar dan tambah apa yang patut. Memuatkan gambar membujur (potret) berukuran tidak melebihi ketinggian 400px (s400).
HTML view
□□□□□■□□□□ 6
06 kosong □□□□□□■□□□ 7
07 kosong □□□□□□□■□□ 8
08 kosong □□□□□□□□■□ 9
09 kosong □□□□□□□□□■ 10/10
10 kosongHTML view
<div align="center" style="height: 460px;">
<div class="mySlides"><div style="text-align: left;"> ■□□□□□□□□□ 1</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlHOlKR3VK2vtJf3erajqs2XASyc2DZSunXsuGp0dzpBg4qRzhHNuN9kngkq0pwYGmx16W1-pHJ9r-abnWWMqv-VsBQLg-g2lmPeFgEUidtVloWoG4tJTYe1g1a2lSoA6XEkk-gQHYFo/s1600/DSC02077+bukit+pasir.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlHOlKR3VK2vtJf3erajqs2XASyc2DZSunXsuGp0dzpBg4qRzhHNuN9kngkq0pwYGmx16W1-pHJ9r-abnWWMqv-VsBQLg-g2lmPeFgEUidtVloWoG4tJTYe1g1a2lSoA6XEkk-gQHYFo/s600/DSC02077+bukit+pasir.jpg" /></a></div>
<div class="mySlides"><div style="text-align: left;"> □■□□□□□□□□ 2</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JdTkuSlNrSEbcC5OXTV_Tug3AAaYPDxt90aUXTsNhCwKWVltMnXRy2RhyTxH1YylcxwkjRBu_Plb8BC9eXJDdAEY-fyiw40UXPW3dSDxuO3f2ELecGsH_2SqKQR3Ptgtf0QdgkXk-z8/s1600/DSC01941+bg+langit.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JdTkuSlNrSEbcC5OXTV_Tug3AAaYPDxt90aUXTsNhCwKWVltMnXRy2RhyTxH1YylcxwkjRBu_Plb8BC9eXJDdAEY-fyiw40UXPW3dSDxuO3f2ELecGsH_2SqKQR3Ptgtf0QdgkXk-z8/s600/DSC01941+bg+langit.jpg" /></a></div>
<div class="mySlides"><div style="text-align: left;"> □□■□□□□□□□ 3</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTpNKIHDLws4bGhOsbYuuFo1RRgUwL2OleyCk2JvtpBuiEzM1FwdN1Q8Bea32sXJnWPVVGoJUDY96QV4wWoPB3uo2ALPAqDuzMVnBzai69OqVbyeY6QaaKCdZagY_laFlQ78FvBLEk4Q/s1600/pantai+klebang.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTpNKIHDLws4bGhOsbYuuFo1RRgUwL2OleyCk2JvtpBuiEzM1FwdN1Q8Bea32sXJnWPVVGoJUDY96QV4wWoPB3uo2ALPAqDuzMVnBzai69OqVbyeY6QaaKCdZagY_laFlQ78FvBLEk4Q/s600/pantai+klebang.jpg" /></a><br />
<div style="background: #eeeeee; font-size: small;">Pantai Klebang</div></div>
<div class="mySlides"><div style="text-align: left;"> □□□■□□□□□□ 4</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2DQVqfPVDTAA5EFi-zvC1OKnh2sIbuRQHkXyPfu9FxRdWpgXMFYeyzfuUgYZ6cfPybr3921cBcnygiHJKKA-Z3LYj5XmzPN3WD6UHfNv5DeUDr0QP8Au9y1r_cYMKd7QMTDvEbDM1mw/s1600/DSC02034+padang+pasir.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2DQVqfPVDTAA5EFi-zvC1OKnh2sIbuRQHkXyPfu9FxRdWpgXMFYeyzfuUgYZ6cfPybr3921cBcnygiHJKKA-Z3LYj5XmzPN3WD6UHfNv5DeUDr0QP8Au9y1r_cYMKd7QMTDvEbDM1mw/s600/DSC02034+padang+pasir.jpg" /></a></div>
<div class="mySlides"><div style="text-align: left;"> □□□□■□□□□□ 5</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBOJg05iIPcE0zvSu_0zyJI_D_hcvktTpD75cQsA5tYMMMOitZMbkzCoTkwmOzYHZW5JBO8GsnTOIsyZ3yG7NyxoN6-3BCGG-h9lv0wnCyHUGEECHjbg2HLcXqC9BKGU-kXRK0cDJT1DA/s900/DSC09507e15+netk.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBOJg05iIPcE0zvSu_0zyJI_D_hcvktTpD75cQsA5tYMMMOitZMbkzCoTkwmOzYHZW5JBO8GsnTOIsyZ3yG7NyxoN6-3BCGG-h9lv0wnCyHUGEECHjbg2HLcXqC9BKGU-kXRK0cDJT1DA/s400/DSC09507e15+netk.jpg"/></a></div>
<div class="mySlides"><div style="text-align: left;"> □□□□□■□□□□ 6</div>06 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□■□□□ 7</div>07 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□□■□□ 8</div>08 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□□□■□ 9</div>09 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□□□□■ 10/10</div>10 kosong</div></div>
<style>
.mySlides {display: none; max-height: 400px;}
</style><script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
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, 2500); // bertukar setiap 2.5 saat
}
</script>
<div class="mySlides"><div style="text-align: left;"> ■□□□□□□□□□ 1</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlHOlKR3VK2vtJf3erajqs2XASyc2DZSunXsuGp0dzpBg4qRzhHNuN9kngkq0pwYGmx16W1-pHJ9r-abnWWMqv-VsBQLg-g2lmPeFgEUidtVloWoG4tJTYe1g1a2lSoA6XEkk-gQHYFo/s1600/DSC02077+bukit+pasir.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlHOlKR3VK2vtJf3erajqs2XASyc2DZSunXsuGp0dzpBg4qRzhHNuN9kngkq0pwYGmx16W1-pHJ9r-abnWWMqv-VsBQLg-g2lmPeFgEUidtVloWoG4tJTYe1g1a2lSoA6XEkk-gQHYFo/s600/DSC02077+bukit+pasir.jpg" /></a></div>
<div class="mySlides"><div style="text-align: left;"> □■□□□□□□□□ 2</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JdTkuSlNrSEbcC5OXTV_Tug3AAaYPDxt90aUXTsNhCwKWVltMnXRy2RhyTxH1YylcxwkjRBu_Plb8BC9eXJDdAEY-fyiw40UXPW3dSDxuO3f2ELecGsH_2SqKQR3Ptgtf0QdgkXk-z8/s1600/DSC01941+bg+langit.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JdTkuSlNrSEbcC5OXTV_Tug3AAaYPDxt90aUXTsNhCwKWVltMnXRy2RhyTxH1YylcxwkjRBu_Plb8BC9eXJDdAEY-fyiw40UXPW3dSDxuO3f2ELecGsH_2SqKQR3Ptgtf0QdgkXk-z8/s600/DSC01941+bg+langit.jpg" /></a></div>
<div class="mySlides"><div style="text-align: left;"> □□■□□□□□□□ 3</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTpNKIHDLws4bGhOsbYuuFo1RRgUwL2OleyCk2JvtpBuiEzM1FwdN1Q8Bea32sXJnWPVVGoJUDY96QV4wWoPB3uo2ALPAqDuzMVnBzai69OqVbyeY6QaaKCdZagY_laFlQ78FvBLEk4Q/s1600/pantai+klebang.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTpNKIHDLws4bGhOsbYuuFo1RRgUwL2OleyCk2JvtpBuiEzM1FwdN1Q8Bea32sXJnWPVVGoJUDY96QV4wWoPB3uo2ALPAqDuzMVnBzai69OqVbyeY6QaaKCdZagY_laFlQ78FvBLEk4Q/s600/pantai+klebang.jpg" /></a><br />
<div style="background: #eeeeee; font-size: small;">Pantai Klebang</div></div>
<div class="mySlides"><div style="text-align: left;"> □□□■□□□□□□ 4</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2DQVqfPVDTAA5EFi-zvC1OKnh2sIbuRQHkXyPfu9FxRdWpgXMFYeyzfuUgYZ6cfPybr3921cBcnygiHJKKA-Z3LYj5XmzPN3WD6UHfNv5DeUDr0QP8Au9y1r_cYMKd7QMTDvEbDM1mw/s1600/DSC02034+padang+pasir.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2DQVqfPVDTAA5EFi-zvC1OKnh2sIbuRQHkXyPfu9FxRdWpgXMFYeyzfuUgYZ6cfPybr3921cBcnygiHJKKA-Z3LYj5XmzPN3WD6UHfNv5DeUDr0QP8Au9y1r_cYMKd7QMTDvEbDM1mw/s600/DSC02034+padang+pasir.jpg" /></a></div>
<div class="mySlides"><div style="text-align: left;"> □□□□■□□□□□ 5</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBOJg05iIPcE0zvSu_0zyJI_D_hcvktTpD75cQsA5tYMMMOitZMbkzCoTkwmOzYHZW5JBO8GsnTOIsyZ3yG7NyxoN6-3BCGG-h9lv0wnCyHUGEECHjbg2HLcXqC9BKGU-kXRK0cDJT1DA/s900/DSC09507e15+netk.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBOJg05iIPcE0zvSu_0zyJI_D_hcvktTpD75cQsA5tYMMMOitZMbkzCoTkwmOzYHZW5JBO8GsnTOIsyZ3yG7NyxoN6-3BCGG-h9lv0wnCyHUGEECHjbg2HLcXqC9BKGU-kXRK0cDJT1DA/s400/DSC09507e15+netk.jpg"/></a></div>
<div class="mySlides"><div style="text-align: left;"> □□□□□■□□□□ 6</div>06 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□■□□□ 7</div>07 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□□■□□ 8</div>08 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□□□■□ 9</div>09 kosong</div>
<div class="mySlides"><div style="text-align: left;"> □□□□□□□□□■ 10/10</div>10 kosong</div></div>
<style>
.mySlides {display: none; max-height: 400px;}
</style><script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
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, 2500); // bertukar setiap 2.5 saat
}
</script>
Ulasan