Widget:SlidingGallerySewing

<style> /* Layout containers matching your original specifications */ .gallery-outer { position: relative; height: 100%; margin: 20px 0; } .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 (Pure CSS - Starts automatically) */ .wrapper {

 position: absolute;
 top: 0;
 left: 0;
 display: flex;
 gap: 20px;
 width: 300px; /* Generous width for the moving track */
 animation: 45s credits linear infinite;

}

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

 animation-play-state: paused;

}

.gallery-item {

 display: inline-block;
 text-align: center;
 width: 160px;
 flex-shrink: 0;

}

.gallery-item img {

 width: 120px;  
 height: 180px; 
 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: 8px;
 line-height: 1.3;

}

@keyframes credits {

 0% { transform: translateX(0); }
 100% { transform: translateX(-1620px); } /* Perfect loop reset point based on total item widths */

} </style>

         <a href="/wiki/Singer_HD_4432">
           <img src="/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327" alt="Singer HD 4432">
         </a>

Singer HD 4432
Basic sewing machine

         <a href="/wiki/Singer_Simple_3232">
           <img src="/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102" alt="Singer Simple 3232">
         </a>

Singer Simple 3232
Starter sewing machine

         <a href="/wiki/Janome_HD-3000BE">
           <img src="/wiki/images/thumb/0/01/Janome_HD-3000BE.jpeg/400px-Janome_HD-3000BE.jpeg" alt="Janome HD-3000BE">
         </a>

Janome HD-3000BE
Intermediate Home Sewing Machine

         <a href="/wiki/Bernina_model_1000">
           <img src="/wiki/images/thumb/f/f9/Bernina1008.png/400px-Bernina1008.png" alt="Bernina model 1008">
         </a>

Bernina model 1008
Intermediate Home Sewing Machine

         <a href="/wiki/Brother_1034DX">
           <img src="/wiki/images/3/3e/Brother-1034DX-Serger.jpeg?20261015223103" alt="Brother 1034DX">
         </a>

Brother 1034DX
Serger

         <a href="/wiki/Brother_PE770">
           <img src="/wiki/images/8/8d/BrotherPE770.jpg" alt="Brother PE770">
         </a>

Brother PE770
Embroidery machine

<style> /* Clean override to let JavaScript control the sliding loop metrics */ .wrapper {

 width: max-content !important;
 animation: none !important;

} </style>

<script> (function() {

 // Find the scrolling layout track row
 var track = document.querySelector('.wrapper');
 if (!track) return;

 // 1. Grab all your unique items cleanly
 var originalItems = Array.prototype.slice.call(track.getElementsByClassName('gallery-item'));
 var totalItemsCount = originalItems.length;
 if (totalItemsCount === 0) return;

 /* 2. FIXED STEP ENGINE: 
    Uses your exact CSS parameters: Card width (160px) + Gap space (20px) = 180px per step! */
 var fullStepWidth = 180; 
 var totalOriginalWidth = totalItemsCount * fullStepWidth;

 // 3. Smart Looper: Clone just enough items to fill the viewable viewport frame area (742px)
 var clonesNeeded = Math.ceil(742 / fullStepWidth) + 1;

 for (var i = 0; i < clonesNeeded; i++) {
   var cloneIndex = i % totalItemsCount;
   var clonedNode = originalItems[cloneIndex].cloneNode(true);
   track.appendChild(clonedNode);
 }

 // 4. Inject the loop transition keyframes directly into the header layout
 var styleSheet = document.createElement("style");
 styleSheet.type = "text/css";
 styleSheet.innerText = 
   "@keyframes dynamicCredits {" +
   "  0% { transform: translateX(0); }" +
   "  100% { transform: translateX(-" + totalOriginalWidth + "px); }" +
   "}\n" +
   ".wrapper { animation: 45s dynamicCredits linear infinite !important; }";
 document.head.appendChild(styleSheet);

})(); </script>