Kumpulan JavaScript Blogger
Script Slider Gambar Dengan Navigasi
<style>
/* Styling untuk slider */
.image-slider {
position: relative;
max-width: 600px; /* Ganti sesuai kebutuhan */
margin: auto;
overflow: hidden;
}
/* Styling untuk gambar slider */
.slides {
display: flex;
transition: transform 0.5s ease;
}
/* Styling untuk slide */
.slide {
min-width: 100%;
box-sizing: border-box;
}
/* Styling untuk gambar dalam slide */
.slide img {
width: 100%;
display: block;
}
/* Styling untuk tombol navigasi */
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px; /* Half of the height of the button */
color: white;
font-weight: bold;
font-size: 18px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
cursor: pointer;
border-radius: 3px;
user-select: none; /* Mencegah pemilihan teks tombol */
z-index: 1000; /* Pastikan tombol berada di atas gambar */
}
.prev {
left: 0;
}
.next {
right: 0;
}
</style>
<!-- Slider Container -->
<div class="image-slider">
<!-- Slider Images -->
<div class="slides">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<!-- Navigation Buttons -->
<button class="prev" onclick="showSlide(-1)">❮</button>
<button class="next" onclick="showSlide(1)">❯</button>
</div>
<script>
let currentSlide = 0;
function showSlide(n) {
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
// Update the current slide index
currentSlide += n;
// Loop around if needed
if (currentSlide >= totalSlides) {
currentSlide = 0;
} else if (currentSlide < 0) {
currentSlide = totalSlides - 1;
}
// Calculate the new offset
const offset = -currentSlide * 100;
// Apply the new transform value
document.querySelector('.slides').style.transform = `translateX(${offset}%)`;
}
// Optional: Automatically change slide every 5 seconds
setInterval(() => showSlide(1), 5000);
</script>
