Buat sendiri: Slider gambar

Demo.

■□□□□□□□□□ 1
□■□□□□□□□□ 2
□□■□□□□□□□ 3

Pantai Klebang
□□□■□□□□□□ 4
□□□□■□□□□□ 5
□□□□□■□□□□ 6
06 kosong
□□□□□□■□□□ 7
07 kosong
□□□□□□□■□□ 8
08 kosong
□□□□□□□□■□ 9
09 kosong
□□□□□□□□□■ 10/10
10 kosong
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
<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>

Ulasan