Cara Membuat Gambar Slide Berlanjut dengan Klik

Cara membuat gambar slide di blog baik pada html blog maupun pada postingan blog ini merupakan cara yang digunakan oleh template Viotoko milik Mas Sugeng. Gambar slidenya bisa berlanjut apabila diklik, next atau prev.

Tanpa basa basi, kita langsung saja pada inti pembahasan, Cara Membuat Gambar Slide Berlanjut dengan Klik.

Langkah ke-1 Cara Membuat Gambar Slide: Salin dan pindahkan kode berikut ini di bawah kode </b:skin>
<style>
.gambar-slide {max-width: 450px; max-height: 393px; overflow: hidden;}
@media only screen and (max-width: 480px) {
.gambar-slide {max-width: 100%;max-height: 100%;}
}
button.next, button.prev {
border: none;
padding: 5px 20px;
text-align: center;
margin: 5px 0px;
background: #e6e6e6;
color: #555;
}
button.next:hover, button.prev:hover {
background: #ddd;
outline: none;
cursor: pointer;
}
button.next:focus, button.prev:focus {
outline: none;
}
</style>

Langkah ke-2 Cara Membuat Gambar Slide: Salin dan pindahkan kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// image slider
const mySiema = new Siema({
  selector: '.gambar-slide'});
document.querySelector('.prev').addEventListener('click', () => mySiema.prev());
document.querySelector('.next').addEventListener('click', () => mySiema.next());
//]]>
</script>
Langkah ke-3 Cara Membuat Gambar Slide: Salin dan pindahkan kode berikut ini di atas kode </head>
Langkah ke-4 Cara Membuat Gambar Slide: Letakan kode gambar Slidenya pada tempat yang Anda inginkan.

<center>
<div class="gambar-slide">
<img alt="gambar produk 1" height="300px" src="Url Gambar 1" width="100%" />
<img alt="gambar produk 2" height="300px" src="Url Gambar 2" width="100%" />
</div>
</center>
<button class="prev">Prev</button>
<button class="next">Next</button>
Catatan: Tulisan berwarna merah pada langkah-langkah di atas, bisa Anda atur sesuai dengan keinginan Anda sendiri. Cara ini juga saya terapkan pada blog landing page jualan produk yang saya buat untuk menampilkan daftar testimoni pelanggan.

Demikianlah di atas Cara Membuat Gambar Slide Berlanjut dengan Klik. Semoga bermanfaat.

Berlangganan update artikel terbaru via email:

Promo Domain Murah

Salah satu manfaat memiliki nama domain adalah mengenalkan brand Anda, apakah itu tentang personal, produk, atau bisnis Anda.

0 Response to "Cara Membuat Gambar Slide Berlanjut dengan Klik"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel