Widget:Carousel：修订间差异

2026年5月3日 (日) 18:59的版本

小工具文档 WIDGET DOCUMENTATION [编辑]

这个文档是内联文档。

用于首页/活动轮换图的微件,最多支持9图轮播。

用法

{{#widget:Carousel
<!--这两个参数写微件的大小-->
|width=800px
|height=300px
<!--这个参数写图片加载尺寸（px)，默认1000，调用时不加单位-->
|thumb=800
|img1=图1.jpg |link1=页面1
|img2=图2.jpg |link2=页面2
……
}}

@@ 第15行： / 第15行： @@
 <button class="c-n n-n" onclick="mv(1)">&#10095;</button>
 <div id="slide-inner">
-<!--{section name=i start=1 loop=10}-->
+<!--{if $img1}--><div class="w-s active"><a class="l" data-t="<!--{$link1}-->"><img class="i-bg" data-f="<!--{$img1}-->"><img class="i" data-f="<!--{$img1}-->" loading="lazy"></a></div><!--{/if}-->
-<!--{assign var="idx" value=$smarty.section.i.index}-->
+<!--{if $img2}--><div class="w-s"><a class="l" data-t="<!--{$link2}-->"><img class="i-bg" data-f="<!--{$img2}-->"><img class="i" data-f="<!--{$img2}-->" loading="lazy"></a></div><!--{/if}-->
-<!--{capture name="ic" assign="imgVal"}--><!--{eval var='$img'|cat:$idx}--><!--{/capture}-->
+<!--{if $img3}--><div class="w-s"><a class="l" data-t="<!--{$link3}-->"><img class="i-bg" data-f="<!--{$img3}-->"><img class="i" data-f="<!--{$img3}-->" loading="lazy"></a></div><!--{/if}-->
-<!--{capture name="lc" assign="lnkVal"}--><!--{eval var='$link'|cat:$idx}--><!--{/capture}-->
+<!--{if $img4}--><div class="w-s"><a class="l" data-t="<!--{$link4}-->"><img class="i-bg" data-f="<!--{$img4}-->"><img class="i" data-f="<!--{$img4}-->" loading="lazy"></a></div><!--{/if}-->
-<!--{if $imgVal}-->
+<!--{if $img5}--><div class="w-s"><a class="l" data-t="<!--{$link5}-->"><img class="i-bg" data-f="<!--{$img5}-->"><img class="i" data-f="<!--{$img5}-->" loading="lazy"></a></div><!--{/if}-->
-<div class="w-s<!--{if $idx==1}--> active<!--{/if}-->">
+<!--{if $img6}--><div class="w-s"><a class="l" data-t="<!--{$link6}-->"><img class="i-bg" data-f="<!--{$img6}-->"><img class="i" data-f="<!--{$img6}-->" loading="lazy"></a></div><!--{/if}-->
-<a class="l" data-t="<!--{$lnkVal}-->">
+<!--{if $img7}--><div class="w-s"><a class="l" data-t="<!--{$link7}-->"><img class="i-bg" data-f="<!--{$img7}-->"><img class="i" data-f="<!--{$img7}-->" loading="lazy"></a></div><!--{/if}-->
-<img class="i-bg" data-f="<!--{$imgVal}-->">
+<!--{if $img8}--><div class="w-s"><a class="l" data-t="<!--{$link8}-->"><img class="i-bg" data-f="<!--{$img8}-->"><img class="i" data-f="<!--{$img8}-->" loading="lazy"></a></div><!--{/if}-->
-<img class="i" data-f="<!--{$imgVal}-->" loading="lazy">
+<!--{if $img9}--><div class="w-s"><a class="l" data-t="<!--{$link9}-->"><img class="i-bg" data-f="<!--{$img9}-->"><img class="i" data-f="<!--{$img9}-->" loading="lazy"></a></div><!--{/if}-->
-</a>
-</div>
-<!--{/if}-->
-<!--{/section}-->
 </div>
 <div class="c-i" id="dots-ctx"></div>