Widget:Carousel

<script> function loadCarouselData() {

   // Make the API query to fetch pages for carousel
   var category = "SimpleProjects"; 
   var carouselData = []; 

   new mw.Api().get({
       action: 'query',
       list: 'categorymembers',
       cmtitle: 'Category:' + category,
       cmlimit: 50, 
       format: 'json'
   }).done(function (data) {
       var pages = data.query.categorymembers;

       var requests = pages.map(function (page) {
           return new mw.Api().get({
               action: 'query',
               prop: 'revisions',
               rvprop: 'content',
               titles: page.title,
               format: 'json'
           }).then(function (pageData) {
               var pageId = Object.keys(pageData.query.pages)[0];
               var content = pageData.query.pages[pageId].revisions[0]['*'];
               var pageUrl = mw.util.getUrl(page.title);
               var imgUrl = ;

               // Try to find a direct image URL (img1=https://...). We do this because some images are from widgets.
               var directMatch = content.match(/img1=(https:\/\/[^\s|}%]+)/);
               if (directMatch) {
                   imgUrl = directMatch[1];
               }

               // If no direct URL, try to find a File:... entry. This is how Media Wiki embeds images.
               var fileMatch = content.match(/\[\[File:([^|\]]+)/);
               if (!imgUrl && fileMatch) {
                   var fileName = fileMatch[1].trim();

                   // Fetch full image URL from MediaWiki API
                   return new mw.Api().get({
                       action: 'query',
                       titles: 'File:' + fileName,
                       prop: 'imageinfo',
                       iiprop: 'url',
                       format: 'json'
                   }).then(function (imageData) {
                       var imagePageId = Object.keys(imageData.query.pages)[0];
                       if (imageData.query.pages[imagePageId].imageinfo) {
                           imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
                       }

                       // Store carousel item data in carouselData array
                       if (imgUrl) {
                           carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
                       }
                   });
               } else {
                   // Store carousel item data
                   if (imgUrl) {
                       carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
                   }
               }
           });
       });

       Promise.all(requests).then(function () {
           // Call the function to display carousel
           displayCarousel(carouselData);
           //console.log(carouselData);
       });
   });

}

// Creates the raw HTML to be injected into the Homepage, in the carousel container div. function displayCarousel(carouselData) {

   var carouselHtml = ;

   carouselData.forEach(function (item) {
       carouselHtml += `

               <a href="${item.pageUrl}">
                   <img src="${item.imgUrl}" alt="Carousel Image">
               </a>

${item.title}

       `;
   });

   // Inject the HTML into the carousel container
   var carouselContainer = $('.carousel-container');
   carouselContainer.html(carouselHtml);

   // Initialize the carousel behavior
   initializeCarousel();

}

function initializeCarousel() {

   let currentIndex = 0;
   let $carouselItems = $(".carousel-item");
   let totalItems = $carouselItems.length;
   
   $carouselItems.hide().eq(currentIndex).show();

   let $prevButton = $(".carousel-prev");
   let $nextButton = $(".carousel-next"');
   
   function nextSlide() {
       currentIndex = (currentIndex + 1) % totalItems;
       updateCarousel();
   }

   // Auto slide every 10 seconds
   let autoSlide = setInterval(nextSlide, 10000); 
   function resetInterval() {
       clearInterval(autoSlide);
       autoSlide = setInterval(nextSlide, 10000);
   }

   $nextButton.click(function () {
       nextSlide();
       resetInterval();
   });

   $prevButton.click(function () {
       currentIndex = (currentIndex - 1 + totalItems) % totalItems;
       updateCarousel();
       resetInterval();
   });

   function updateCarousel () {
      $carouselItems.hide().eq(currentIndex).show();
   }

}

// Load the carousel data on page load $(document).ready(function () {

   loadCarouselData(); 

});

</script>

 <button class="carousel-prev"> ◀︎ </button>
 <button class="carousel-next"> ▶︎︎ </button>