.pp-slideshow{ position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-family: Arial, Helvetica, sans-serif; } .pp-slides-track{ position: relative; width: 100%; height: 100%; } .pp-slide{ position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease-in-out; } .pp-slide.active{ opacity: 1; } .pp-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; } .pp-arrow{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; font-size: 20px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .pp-arrow:hover{ background: rgba(0,0,0,0.7); } .pp-prev{ left: 14px; } .pp-next{ right: 14px; }

.pp-dots{ position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 5; } .pp-dot{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .pp-dot.active{ background: #fff; transform: scale(1.2); }

@media (max-width: 600px){ .pp-arrow{ width: 34px; height: 34px; font-size: 16px; } }

(function(){ let ppIndex = 0; let ppTimer = null; const INTERVAL = 4000; // ganti angka ini (ms) untuk mengubah kecepatan slide otomatis

function ppShow(i){ const slides = document.querySelectorAll('#ppSlideshow .pp-slide'); const dots = document.querySelectorAll('#ppSlideshow .pp-dot'); ppIndex = (i + slides.length) % slides.length; slides.forEach((s, idx) => s.classList.toggle('active', idx === ppIndex)); dots.forEach((d, idx) => d.classList.toggle('active', idx === ppIndex)); }

window.ppMove = function(step){ ppShow(ppIndex + step); ppResetTimer(); };

window.ppGoTo = function(i){ ppShow(i); ppResetTimer(); };

function ppAuto(){ ppShow(ppIndex + 1); }

function ppResetTimer(){ clearInterval(ppTimer); ppTimer = setInterval(ppAuto, INTERVAL); }

const container = document.getElementById('ppSlideshow'); container.addEventListener('mouseenter', () => clearInterval(ppTimer)); container.addEventListener('mouseleave', ppResetTimer);

ppResetTimer(); })();