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: Stops the sliding movement when mouse enters the gallery area */ .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: Makes the specific image slightly pop out */ .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>

       {foreach $images as $index => $img}

           <a href="/wiki/{$links[$index]|escape:'url'}">
             <img src="/images/{$img|escape:'html'}" alt="{$captions[$index]|escape:'html'}">
           </a>

{$captions[$index]}

       {/foreach}