💙<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Gambar Berjalan Horizontal</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.carousel-window {
/* Ukuran jendela akan sama dengan ukuran gambar */
width: 250px; /* Lebar contoh gambar */
height: 300px; /* Tinggi contoh gambar */
margin-top: 80px;
overflow: hidden; /* Penting untuk menyembunyikan gambar yang belum masuk jendela */
border: 0px solid #007bff;
position: relative; /* Untuk positioning image-track */
}
.image-track {
display: flex; /* Membuat gambar berjejer horizontal */
width: fit-content; /* Lebar track menyesuaikan total lebar gambar */
height: 100%;
transition: transform 1s ease-in-out; /* Efek transisi saat gambar berjalan */
}
.image-track img {
width: auto; /* Lebar setiap gambar harus sama dengan lebar jendela */
height: 300px; /* Tinggi setiap gambar harus sama dengan tinggi jendela */
padding: 0px;
flex-shrink: 0; /* Mencegah gambar menyusut */
object-fit: cover; /* Memastikan gambar mengisi area tanpa distorsi, bisa juga 'contain' */
}
</style>
</head>
<body>
<div class="carousel-window">
<div class="image-track" id="imageTrack">
<img src="http://192.187.102.46/wp-content/uploads/2024/08/foto_emak_-1810.jpg" />
<img src="http://192.187.102.46/wp-content/uploads/2024/08/foto_bugil_-7847.jpg" />
<img src="http://192.187.102.46/wp-content/uploads/2024/08/poto_preti_cinta-2514.jpg" />
<img src="http://192.187.102.46/wp-content/uploads/2024/08/foto_hot_bu-8542.jpg" />
<img src="http://192.187.102.46/wp-content/uploads/2024/08/Milly_cewek_filipi-9584.jpg" />
<img src="http://192.187.102.46/wp-content/uploads/2024/08/foto_hot_bu-8542.jpg" />
</div>
</div>
<script>
const imageTrack = document.getElementById('imageTrack');
const images = imageTrack.querySelectorAll('img');
const totalImages = images.length;
let currentImageIndex = 0;
const slideDuration = 2000; // Jeda 4 detik dalam milidetik (4000ms)
const transitionDuration = 1000; // Durasi transisi geser 1 detik
function slideImages() {
// Hitung berapa banyak kita harus menggeser track
// currentImageIndex * lebar_gambar
const offset = -currentImageIndex * images[0].offsetWidth;
imageTrack.style.transform = `translateX(${offset}px)`;
// Pindah ke gambar berikutnya setelah jeda + durasi transisi
setTimeout(() => {
currentImageIndex++;
if (currentImageIndex >= totalImages) {
currentImageIndex = 0; // Kembali ke gambar pertama jika sudah mencapai akhir
}
slideImages(); // Lanjutkan slide
}, slideDuration + transitionDuration); // Jeda + durasi transisi
}
// Mulai slideshow setelah halaman dimuat
window.onload = () => {
// Mulai slide pertama setelah durasi transisi
// Agar gambar pertama terlihat penuh sebelum memulai slide
setTimeout(slideImages, transitionDuration);
};
</script>
</body>
</html>