Widget:SlidingGallery

<style> /* Layout containers matching your original specifications */ .gallery-outer { position: relative; height: 100%; } .gallery-bg { position: relative; margin: 0 -1em; padding: 0; background-color: transparent; border: 1px none #ddd; height: 100%; } .gallery-viewport { position: relative; margin: 0 auto; width: 742px; height: 300px; overflow: hidden; }

/* Sliding engine (Starts sliding automatically) */ .wrapper {

 position: absolute;
 top: 0;
 left: 0;
 display: flex;
 gap: 15px;
 width: 5000px; 
 animation: 60s credits linear infinite;

}

/* ⏸️ PAUSE ANIMATION ON HOVER */ .wrapper:hover {

 animation-play-state: paused;

}

.gallery-item {

 display: inline-block;
 text-align: center;
 width: 150px;

}

.gallery-item img {

 width: 100px;  /* Match widths=100px */
 height: 200px; /* Match heights=200px */
 object-fit: contain;
 transition: transform 0.3s ease;

}

/* 🔍 ENLARGE IMAGE ON HOVER */ .gallery-item img:hover {

 transform: scale(1.15);
 cursor: pointer;

}

.gallery-caption {

 font-size: 0.85em;
 color: #333;
 margin-top: 5px;
 line-height: 1.2;

}

@keyframes credits {

 0% { transform: translateX(0); }
 100% { transform: translateX(-2500px); }

} </style>

<script> (function() {

 // Capture the raw parameters passed from the wiki page setup
 var rawImages = "";
 var rawLinks = "";
 var rawCaptions = "";

 // Clean up the text data strings into manageable clean arrays
 var images = rawImages ? rawImages.split(',') : [];
 var links = rawLinks ? rawLinks.split(',') : [];
 var captions = rawCaptions ? rawCaptions.split(',') : [];

 var htmlOutput = ;

 // Generate the gallery rows loop using clean Javascript
 for (var i = 0; i < images.length; i++) {
   if (!images[i].trim()) continue;

   var cleanImg = images[i].trim().replace(/ /g, '_');
   var cleanLink = links[i] ? links[i].trim().replace(/ /g, '_') : ;
   var caption = captions[i] ? captions[i].trim() : ;

htmlOutput += '

';

   htmlOutput += '  <a href="/wiki/' + encodeURIComponent(cleanLink) + '">';
   htmlOutput += '    <img src="/images/' + encodeURIComponent(cleanImg) + '" alt="' + caption + '">';
   htmlOutput += '  </a>';

htmlOutput += '

' + caption + '

'; htmlOutput += '

';

 }

 // Inject the completed slider directly into the viewport container
 document.getElementById('js-gallery-wrapper').innerHTML = htmlOutput;

})(); </script>