Widget:NewsLanding/Slider

<script>

 const container = document.getElementById('news-slider-container');
 const prevButton = document.getElementById('prev');
 const nextButton = document.getElementById('next');

 let currentIndex = 0;

 function showNews(index) {
   const offset = -index * 100;
   container.style.transform = `translateX(${offset}%)`;
 }

 function showNextNews() {
   currentIndex = (currentIndex + 1) % container.children.length;
   showNews(currentIndex);
 }

 function showPrevNews() {
   currentIndex = (currentIndex - 1 + container.children.length) % container.children.length;
   showNews(currentIndex);
 }

 nextButton.addEventListener('click', showNextNews);
 prevButton.addEventListener('click', showPrevNews);

 // Auto rotate every 20 seconds
 setInterval(showNextNews, 20000);

</script>