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)">&#10094;</button>
  <button class="next" onclick="showSlide(1)">&#10095;</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>

1 2 3 4 5 6 7