Kode script untuk membuat gambar begerak

 Kode script untuk membuat gambar begerak yang diserta cuplikan teks (snippet)

<style>

.carousel-container {position: relative; width: 100%; overflow: hidden; border: 1px solid #ddd; border-radius: 10px;} .carousel { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .carousel::-webkit-scrollbar { display: none; } .carousel-item { width: 240px; height: 270px; margin: 10px;  flex-shrink: 0; background: #f9f9f9; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);} .carousel-link { text-decoration: none; color: #333; display: block; text-align: center;} .carousel-image { width: 200px; max-height: 150px;  height: 150px; object-fit: cover;  border-top-left-radius: 5px; border-top-right-radius: 5px;  filter: brightness(0.8) contrast(1.2);  transition: filter 0.3s ease; /* Tambahkan animasi untuk hover */} .carousel-image:hover { filter: filter: brightness(105%) contrast(115%); /* Efek hover */} .carousel-title { font-size: 12px; margin: 10px 0 5px; font-weight: 800} .carousel-snippet { font-size: 14px; color: #666; padding: 0 10px 10px;} .carousel-nav {position: absolute;  top: 50%;  transform: translateY(-50%);  background: rgba(0, 0, 0, 0.5); color: #fff; border: none; padding: 10px; cursor: pointer;  z-index: 1000; border-radius: 50%;} .carousel-nav.prev { left: 10px;} .carousel-nav.next {right: 10px;} .carousel-nav:hover { background: rgba(0, 0, 0, 0.7);}

</style>

<div class="carousel-container"> <div class="carousel" id="featured-posts-carousel">  </div> <button class="carousel-nav prev" onclick="scrollCarousel(-1)">&#10094;</button> <button class="carousel-nav next" onclick="scrollCarousel(1)">&#10095;</button> </div>

<script>

const feedUrl = "https://ainamulyana.blogspot.com/feeds/posts/default/-/News?alt=json&max-results=100"; async function loadFeaturedPosts() {try {const response = await fetch(feedUrl); const data = await response.json(); const entries = data.feed.entry || []; const carouselContainer = document.getElementById('featured-posts-carousel');  entries.forEach(entry => { const title = entry.title.$t; const link = entry.link.find(l => l.rel === "alternate").href;  const snippet = entry.summary ? entry.summary.$t.slice(0, 100) + '...' : '';  const image = entry.media$thumbnail ? entry.media$thumbnail.url.replace(/\/s\d+-c/, '/s400') : 'https://via.placeholder.com/150'; const item = document.createElement('div');  item.classList.add('carousel-item'); item.innerHTML = `  <a href="${link}" target="_blank" class="carousel-link">  <img src="${image}" alt="${title}" class="carousel-image"> <h3 class="carousel-title">${title}</h3>  <p class="carousel-snippet">${snippet}</p>  </a>`;  carouselContainer.appendChild(item);  }); startAutoScroll(carouselContainer); } catch (error) {console.error("Gagal memuat postingan:", error);}} function scrollCarousel(direction) {const carouselContainer = document.getElementById('featured-posts-carousel'); const scrollAmount = 300; carouselContainer.scrollBy({ left: direction * scrollAmount,     behavior: 'smooth'  }); } function startAutoScroll(carouselContainer) {let scrollPosition = 0;  const scrollStep = 300;  const interval = 3000;  setInterval(() => { const maxScroll = carouselContainer.scrollWidth - carouselContainer.clientWidth;  if (scrollPosition >= maxScroll) {scrollPosition = 0; } else {      scrollPosition += scrollStep; } carouselContainer.scrollTo({ left: scrollPosition,  behavior: 'smooth' }); }, interval);} loadFeaturedPosts(); </script>

Info Regulasi dan Kumpulan Soal Ujian US SAS, SAT, TKA dan Lainnya