Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
BUAT SLIDESHOW PURE JAVASCRIPT
ini nih gan saya lagi belajar bikin slideshow <a href='http://naufalh.tk'>http://naufalh.tk</a> atau <a href='http://naufalh.000webhostapp.com'>http://naufalh.000webhostapp.com</a>
cara bikin auto play slideshownya gimana ya? supaya gak ganggu tombol next/prev nya
ini kode htmlnya
<section id="jumbozoid" class="main-content">
<div class="arrow arrow-prev" onclick="plusDivs(-1)"><span>⟨</span></div>
<div class="gallery-slide">
<div class="wrap-content">
<div class="slideshow">
<img src="img/collect/0.png" alt="flat blue montain">
<p>TRY 1</p>
</div>
<div class="slideshow">
<img src="img/collect/1.png" alt="flat beautifull sunset">
<p>TRY 2</p>
</div>
<div class="slideshow">
<img src="img/collect/2.png" alt="flat mountain rain">
<p>TRY 3</p>
</div>
</div>
</div>
<div class="arrow arrow-next" onclick="plusDivs(1)"><span>⟩</span></div>
</section>
ini kode jsnya
// manual slideshow
var slideIndex = 1;
var imgTarget = document.getElementsByClassName("slideshow");
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
if (n > imgTarget.length) {slideIndex = 1}
if (n < 1) {slideIndex = imgTarget.length}
for (i = 0; i < imgTarget.length; i++) {
imgTarget[i].style.opacity = '0' ;
imgTarget[i].style.transition = '1s ease-in-out';
}
imgTarget[slideIndex - 1].style.opacity = '1' ;
imgTarget[slideIndex - 1].style.transition = '1s ease-in-out';
}
showDivs(slideIndex);
mohon bantuannya terimakasih.
10 Jawaban:
Boleh tau alasan bikin sendiri ga gan? Kenapa ga make yg udah ada aja? Hehe curious
var waktu = 1000;//1 detik
setInterval(function(){
plusDivs(slideIndex++);
}, waktu)
mungkin gitu gan... jadi pindah setiap 1 detik
@arieseno alasan saya bikin sendiri biar paham javascript dulu gan ,pengen lebih banyak belajar studi kasusnya dulu , nanti kalau uda paham juga pasti pake library kok(jquery dll), atau mungkin bang @arioseno punya metode yang lebih tepat bisa di share disini :D
gak bisa bang @sukmaw , itu codenya ditempatkan dimana ya?
kalau menurut ane sih paling bawah aja setelah fungsi nya ke load terlebih dahulu
logikanya sih pake setInterval setiap jarak / setiap 1 detik kita jalanin plusDivs dengan index nya += 1
coba liat console salah nya apa gan
Jawaban Terpilih
dikasih counter buat atur kapan harus pindah slide. dan setiap ganti slide counternya direset. auto slide atau click arrow sama2 reset counter biar ga tabrakan.
var counter = 0;
function plusDivs(n) {
showDivs(slideIndex += n);
counter = 0; // counter reset ke 0 baik manual click ataupun auto slide
}
// tambahin ini di bawah
setInterval(function()
{
counter++; // counter nambah per 1 detik
if(counter >= 5)
{
plusDivs(1); // kalau counter >= 5 auto next slide
}
}, 1000);
ini contohnya saya kasih tambahan show counternya https://embed.plnkr.co/IcddAMSW6ItonZeO3qp0/
kalau maksud ane gini gan...
ada salah di codingan ane
var waktu = 5000;//5 detik
setInterval(function(){
plusDivs(1);
}, waktu)
setiap 5 detik pindah
wah bang @rahmatsasongko dan bang @sukmaw makasih buat jawabannya ,alhamdulillah uda beres , makasih banyak bang , belajar javascript sampe bisa nyelesein studi kasusnya sendiri gitu berapa lama sih ? jujur aja saya masih bingung buat studi kasus di js , bagi2 tipsnya dong bang @rahmatsasongko @sukmaw hehe
sekali lagi makasih ya bang
cuman saran ane aja gan.. agan belajar aja javascript nya pahami fungsi masing2 dan sambil mikir oh fungsi ini digunakan seperti berarti nanti di project saya bisa di implementasi kan... dan programmer juga ga semuanya tau semua fungsi di javascript.. jadi inget2 aja yang menurut agan emang berguna buat project
@sukmaw siiiap bang , saran yang bermanfaat banget. intinya sering2 latihan ya bang :D