feat(solution): sl-clients__grid中的内容如果超过5个时。自动循环播放

public/themes/dist_static/static/css/solution.css

@@ -203,6 +203,9 @@
   font-weight: 400;
   line-height: var(--font-64);
 }
+.sl-clients__viewport {
+  width: 100%;
+}
 .sl-clients__grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -227,6 +230,34 @@
   object-fit: contain;
 }
 
+/* 超过 5 个：CSS 横向无缝循环（内容在模板里复制一份） */
+.sl-clients__viewport.is-marquee {
+  overflow: hidden;
+  container-type: inline-size;
+}
+.sl-clients__viewport.is-marquee .sl-clients__grid {
+  display: flex;
+  width: max-content;
+  gap: 1.5rem;
+  animation: sl-clients-marquee 30s linear infinite;
+}
+.sl-clients__viewport.is-marquee .sl-clients__item {
+  flex: 0 0 calc((100cqi - 6rem) / 5);
+  width: calc((100cqi - 6rem) / 5);
+}
+.sl-clients__viewport.is-marquee:hover .sl-clients__grid {
+  animation-play-state: paused;
+}
+@keyframes sl-clients-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sl-clients__viewport.is-marquee .sl-clients__grid {
+    animation: none;
+  }
+}
+
 .sl-cases {
   position: relative;
   padding-top: 7.5rem;
@@ -418,6 +449,10 @@
   .sl-clients__grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .sl-clients__viewport.is-marquee .sl-clients__item {
+    flex-basis: calc((100cqi - 4.5rem) / 4);
+    width: calc((100cqi - 4.5rem) / 4);
+  }
   .sl-cases__body {
     grid-template-columns: 1fr;
     gap: 40Px;
@@ -442,6 +477,10 @@
   .sl-clients__grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .sl-clients__viewport.is-marquee .sl-clients__item {
+    flex-basis: calc((100cqi - 3rem) / 3);
+    width: calc((100cqi - 3rem) / 3);
+  }
   .sl-cases__nav {
     margin-top: 24Px;
   }
@@ -471,6 +510,13 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12Px;
   }
+  .sl-clients__viewport.is-marquee .sl-clients__grid {
+    gap: 12Px;
+  }
+  .sl-clients__viewport.is-marquee .sl-clients__item {
+    flex-basis: calc((100cqi - 12Px) / 2);
+    width: calc((100cqi - 12Px) / 2);
+  }
   .sl-clients__item {
     height: 100Px;
   }

public/themes/website/1/zh/demo/solution.html

@@ -154,13 +154,21 @@
     {if !empty($sub_cates[4])}
     <section class="sl-clients section__wrap" id="clients" data-header-dark>
       <h2 class="sl-clients__title">{$sub_cates[4]['title'] ?? ''}</h2>
-      <div class="sl-clients__grid">
-        {php}
-        $contents = getContentByCategory($sub_cates[4]['id'], $seller_id, 6, 'sort asc', ['thumbnail', 'category']);
-        {/php}
-        {volist name="contents" id="vo"}
-        <div class="sl-clients__item"><img src="{$vo['thumbnail']['url'] ?? ''}" alt="" width="252" height="160" loading="lazy" /></div>
-        {/volist}
+      {php}
+      $contents = getContentByCategory($sub_cates[4]['id'], $seller_id, 20, 'sort asc', ['thumbnail', 'category']);
+      $clients_marquee = is_array($contents) && count($contents) > 5;
+      {/php}
+      <div class="sl-clients__viewport{if $clients_marquee} is-marquee{/if}">
+        <div class="sl-clients__grid">
+          {volist name="contents" id="vo"}
+          <div class="sl-clients__item"><img src="{$vo['thumbnail']['url'] ?? ''}" alt="" width="252" height="160" loading="lazy" /></div>
+          {/volist}
+          {if $clients_marquee}
+          {volist name="contents" id="vo"}
+          <div class="sl-clients__item" aria-hidden="true"><img src="{$vo['thumbnail']['url'] ?? ''}" alt="" width="252" height="160" loading="lazy" /></div>
+          {/volist}
+          {/if}
+        </div>
       </div>
     </section>
     {/if}