Cara Membuat Slideshow dengan Jquery

Posted by Andi Setiawan Published on July 20, 2019 0 comments

Cara Memasang Slideshow di Blog, Jquery Slideshow untuk Blogspot. Jquery slide show atau slider Jquery adalah slideshow yang dibangun dengan Javascript Jquery untuk menampilkan gambar atau teks. Jquery slideshow sendiri memberi kemudahan dalam memilih beberapa efek animasi transisi pada gambar yang ditampilkan. Umumnya digunakan pada website atau blog yang memberi penekanan pada tampilan foto. Slideshow semacam ini banyak dipakai oleh website portofolio dan fotografi serta toko online untuk menampilkan animasi galeri foto mereka. Jquery slide show juga banyak digunakan sebagai widget Blogger untuk menampilkan update post terbaru maupun popular posts secara otomatis. Dengan menggunakan Jquery slideshow ini akan memungkinkan kita untuk membuat slideshow dengan banyak efek transisi gambar yang sangat menarik.

Tutorial Jquery slide show ini cukup mudah diikuti dan dipahami. Untuk cara membuat slider Jquery ini bisa terpasang di Blogspot, berikut tutorial cara memasang Jquery slideshow di dalam blog:

Buka blogger.com dan login.
Lalu klik Tema => Edit HTML
Pastikan template yang digunakan sudah menggunakan Jquery. Jika belum, agar script bisa berjalan lancar, tambahkan Jquery pada tema Blogspot yang digunakan. Jika sudah ada Jquery, abaikan baris ini.
Salin script di bawah ini dan tempelkan tepat di atas tag </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() { 
$(".slideshow .content-slider:gt(0)").hide();
setInterval(function() {
 $('.slideshow .content-slider:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
 .appendTo('.slideshow');
}, 3000);
});
//]]></script>

Kemudian salin style CSS di bawah ini dan letakkan di atas code ]]></b:skin>

.slideshow{
margin:20px auto;
width: 100%;
height: auto}
.content-slider{
display:none}
.content-slider img{
max-width:100%;
height:auto}

Setelah itu simpan template.

Untuk memasang Jquery slide show di dalam postingan, caranya cukup mudah:

Edit postingan yang ingin diberi slide show, dan pilih mode HTML.
Salin tag HTML di bawah ini dan letakkan pada tempat yang diinginkan.

<div class="slideshow">
<div class="content-slider">
<img src="{URL GAMBAR 1}"/>
<div class="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>
</div>
<div class="content-slider">
<img src="{URL GAMBAR 2}"/>
<div class="text-center">
Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. 
</div>
</div>
<div class="content-slider">
<img src="{URL GAMBAR 3}"/>
<div class="text-center">
Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. 
</div>
</div>
</div>