Widget:SlidingGallerySewing

<script> var GALLERY_DATA = [

 {
   link: "/wiki/Singer_HD_4432",
   img: "/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327",
   title: "Singer HD 4432",
   desc: "Basic sewing machine"
 },
 {
   link: "/wiki/Singer_Simple_3232",
   img: "/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102",
   title: "Singer Simple 3232",
   desc: "Starter sewing machine"
 },
 {
   link: "/wiki/Janome_HD-3000BE",
   img: "/wiki/images/thumb/0/01/Janome_HD-3000BE.jpeg/400px-Janome_HD-3000BE.jpeg",
   title: "Janome HD-3000BE",
   desc: "Intermediate Home Sewing Machine"
 },
 {
   link: "/wiki/Bernina_model_1000",
   img: "/wiki/images/thumb/f/f9/Bernina1008.png/400px-Bernina1008.png",
   title: "Bernina model 1008",
   desc: "Intermediate Home Sewing Machine"
 },
 {
   link: "/wiki/Brother_1034DX",
   img: "/wiki/images/thumb/3/3e/Brother-1034DX-Serger.jpeg/120px-Brother-1034DX-Serger.jpeg",
   title: "Brother 1034DX",
   desc: "Serger"
 },
 {
   link: "/wiki/Brother_PE770",
   /* 🌟 UPDATED: Added your optimized 240px thumbnail path below */
   img: "/wiki/images/thumb/8/8d/BrotherPE770.jpg/240px-BrotherPE770.jpg",
   title: "Brother PE770",
   desc: "Embroidery machine"
 }

]; </script>

<style> .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%; }

/* EXPANDED VIEWPORT BOUNDS: Tall enough to safely clear the new image sizes */ .gallery-viewport {

 position: relative; 
 margin: 0 auto; 
 width: 742px; /* Total viewable window width area optimized for iPads */
 height: 380px; 
 overflow: hidden; 

}

.wrapper {

 position: absolute;
 top: 0;
 left: 0;
 display: flex;
 gap: 25px; /* Spaces out your columns neatly */
 width: max-content; 

}

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

 animation-play-state: paused !important;

}

/* EXPANDED ITEM BOX COLUMNS: Boosted cards to make room for wide thumbnails */ .gallery-item {

 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 text-align: center;
 width: 220px; 
 flex-shrink: 0;

}

/* DYNAMIC LARGE IMAGE BOUNDARIES */ .gallery-item img {

 width: 190px;  
 height: 240px; 
 object-fit: contain; /* Scales mismatched image formats without distortion */
 transition: transform 0.3s ease;

}

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

 transform: scale(1.12); 
 cursor: pointer;

}

.gallery-caption {

 font-size: 0.9em; 
 color: #333;
 margin-top: 10px;
 line-height: 1.3;

} </style>

<script> (function() {

 var track = document.getElementById('sewing-marquee-track');
 if (!track || !GALLERY_DATA || GALLERY_DATA.length === 0) return;

 var htmlOutput = ;

 // 1. Build the HTML block for the primary list entries
 for (var i = 0; i < GALLERY_DATA.length; i++) {
   var item = GALLERY_DATA[i];

htmlOutput += '

';

   htmlOutput += '  <a href="' + item.link + '"><img src="' + item.img + '" alt="' + item.title + '"></a>';

htmlOutput += '

' + item.title + '
' + item.desc + '

'; htmlOutput += '

';

 }

 // 2. Build the HTML block for the duplicate list entries to create the continuous loop
 for (var j = 0; j < GALLERY_DATA.length; j++) {
   var cloneItem = GALLERY_DATA[j];

htmlOutput += '

';

   htmlOutput += '  <a href="' + cloneItem.link + '"><img src="' + cloneItem.img + '" alt="' + cloneItem.title + '"></a>';

htmlOutput += '

' + cloneItem.title + '
' + cloneItem.desc + '

'; htmlOutput += '

';

 }

 // 3. Inject the compiled loop lists safely into the DOM track container 
 track.innerHTML = htmlOutput;

 // 4. Calculate the mathematically perfect loop point dynamically using percentage tracking:
 //    Sliding left by exactly -50% ensures an infinite, gapless repeat loop regardless of dimensions.
 var styleSheet = document.createElement("style");
 styleSheet.type = "text/css";
 styleSheet.innerText = 
   "@keyframes dynamicMarquee {" +
   "  0% { transform: translateX(0); }" +
   "  100% { transform: translateX(-50%); }" +
   "}\n" +
   "#sewing-marquee-track { animation: 35s dynamicMarquee linear infinite; }";
 document.head.appendChild(styleSheet);

})(); </script>