fix(submit): render slide cover preview as a real swiper

Replace the static first-image preview with the reference theme's
.new-swiper contract (loop + autoplay + prev/next + pagination) in both
the server-rendered box and the JS re-render, and run auto_fun for
slide covers so new_swiper initializes them.

assets/js/front-submit.js

@@ -436,10 +436,21 @@
       if (t === 'image' && d.url) {
         html = '<img src="' + escapeHtml(d.url) + '" alt="">';
       } else if (t === 'slide' && Array.isArray(d) && d[0] && d[0].url) {
+        // 与参考主题一致：幻灯片封面渲染真实 swiper，由 auto_fun 里的 new_swiper 初始化。
+        var slideImgs = d
+          .filter(function (item) { return item && item.url; })
+          .map(function (item) {
+            return '<div class="swiper-slide"><img src="' + escapeHtml(item.url) + '" alt=""></div>';
+          })
+          .join('');
         html =
-          '<img src="' +
-          escapeHtml(d[0].url) +
-          '" alt=""><span class="featured-type-badge"><i class="fa fas fa-image"></i></span>';
+          '<div class="new-swiper scale-height" data-loop="true" data-autoplay="true" data-interval="2000" style="--scale-height:50%;">' +
+          '<div class="swiper-wrapper">' + slideImgs + '</div>' +
+          '<div class="swiper-button-prev"></div>' +
+          '<div class="swiper-button-next"></div>' +
+          '<div class="swiper-pagination"></div>' +
+          '</div>' +
+          '<span class="featured-type-badge"><i class="fa fas fa-image"></i></span>';
       } else if (t === 'video') {
         html =
           '<div class="new-dplayer dplayer-scale-height" style="--scale-height:50%;" video-url="' +
@@ -453,7 +464,7 @@
       }
       this.destroyFeaturedPlayer(preview);
       preview.innerHTML = html;
-      if (t === 'video' && typeof window.auto_fun === 'function') {
+      if ((t === 'video' || t === 'slide') && typeof window.auto_fun === 'function') {
         window.auto_fun();
       }
       var clearBtn = qs('[data-featured-action="close"]');

templates/parts/submit/featured.php

@@ -27,7 +27,18 @@ $can_video = !empty($ctx['can_cover_video']);
 		<?php if ($type === 'image' && !empty($data['url'])) : ?>
 			<img src="<?php echo esc_url((string) $data['url']); ?>" alt="">
 		<?php elseif ($type === 'slide' && is_array($data) && !empty($data[0]['url'])) : ?>
-			<img src="<?php echo esc_url((string) $data[0]['url']); ?>" alt="">
+			<div class="new-swiper scale-height" data-loop="true" data-autoplay="true" data-interval="2000" style="--scale-height:50%;">
+				<div class="swiper-wrapper">
+					<?php foreach ($data as $slide) : ?>
+						<?php if (!empty($slide['url'])) : ?>
+							<div class="swiper-slide"><img src="<?php echo esc_url((string) $slide['url']); ?>" alt=""></div>
+						<?php endif; ?>
+					<?php endforeach; ?>
+				</div>
+				<div class="swiper-button-prev"></div>
+				<div class="swiper-button-next"></div>
+				<div class="swiper-pagination"></div>
+			</div>
 			<span class="featured-type-badge"><i class="fa fas fa-image"></i></span>
 		<?php elseif ($type === 'video') : ?>
 			<div class="new-dplayer dplayer-scale-height" style="--scale-height:50%;"

tests/front-submit/featured-buttons-contract.test.cjs

@@ -38,6 +38,33 @@ test('image picker folds multi-select into a slide cover like the reference them
   assert.doesNotMatch(js, /act === 'slide'/);
 });
 
+test('slide cover preview renders a real swiper like the reference theme', () => {
+  const featured = read('templates/parts/submit/featured.php');
+  const js = read('assets/js/front-submit.js');
+
+  const swiperContract =
+    /new-swiper scale-height" data-loop="true" data-autoplay="true" data-interval="2000" style="--scale-height:50%;"/;
+  assert.match(featured, swiperContract);
+  assert.match(js, swiperContract);
+
+  // Server-rendered slides iterate the saved attachment list.
+  assert.match(featured, /foreach \(\$data as \$slide\) : \?>/);
+  assert.match(featured, /<div class="swiper-slide"><img src="<\?php echo esc_url\(\(string\) \$slide\['url'\]\); \?>"/);
+
+  // Client-rendered slides come from the multi-select payload; the runtime
+  // initializer (auto_fun -> new_swiper) must run for slide covers too.
+  assert.match(js, /'<div class="swiper-slide"><img src="' \+ escapeHtml\(item\.url\) \+ '" alt=""><\/div>'/);
+  assert.match(js, /t === 'video' \|\| t === 'slide'/);
+
+  for (const control of ['swiper-wrapper', 'swiper-button-prev', 'swiper-button-next', 'swiper-pagination']) {
+    assert.match(featured, new RegExp(`class="${control}"`));
+    assert.match(js, new RegExp(`class="${control}"`));
+  }
+
+  // The static first-image slide preview is gone.
+  assert.doesNotMatch(js, /escapeHtml\(d\[0\]\.url\)/);
+});
+
 test('submit.css mirrors the reference visibility matrix for the buttons row', () => {
   const css = read('assets/css/frontend/pages/submit.css');