模板:轮播图：修订间差异

2025年5月1日 (四) 20:01的版本

 <button class="carousel-prev">‹</button>

 <button class="carousel-next">›</button>

描述

此模板用于在维基页面上创建一个轮播图展示框，可以用来展示多个幻灯片内容。

用法

{{轮播图
|content=
{{CarouselItem
 |title=欢迎来到本站
 |description=点此进入详细介绍
 |image=Example1.jpg
 |link=Main_Page
}}
{{CarouselItem
 |title=查看项目
 |description=使用语义维基与Cargo整合数据
 |image=Example2.jpg
 |link=Projects
}}
{{CarouselItem
 |title=联系我们
 |description=点击获取联系方式
 |image=Example3.jpg
 |link=Contact
}}
}}

文件:Example1.jpg

欢迎来到本站

点此进入详细介绍

文件:Example2.jpg

查看项目

使用语义维基与Cargo整合数据

文件:Example3.jpg

联系我们

点击获取联系方式

 <button class="carousel-prev">‹</button>

 <button class="carousel-next">›</button>

参数

content: 包含多个幻灯片的内容

另见

Template:CarouselItem: 轮播图中单个幻灯片的模板

@@ 第1行： / 第1行： @@
+<div class="mw-carousel" id="main-carousel" style="max-height:300px;">
+{{{content|}}}
+<div class="carousel-navigation">
+  <button class="carousel-prev">&lsaquo;</button>
+  <div class="carousel-indicators"></div>
+  <button class="carousel-next">&rsaquo;</button>
+</div>
+</div>
 <includeonly>
-<div class="modern-carousel">
+[[Category:使用轮播图的页面]]
-  <div class="carousel-container">
-    <div class="carousel-track">
-      {{{content}}}
-    </div>
-  </div>
-  <div class="carousel-navigation">
-    <button class="carousel-button prev">←</button>
-    <button class="carousel-button next">→</button>
-  </div>
-</div>
 </includeonly>
 <noinclude>
@@ 第18行： / 第17行： @@
 == 用法 ==
 <pre>
-{{Carousel
+{{轮播图
 |content=
 {{CarouselItem
-|image=Example1.jpg
+ |title=欢迎来到本站
-|title=First Item
+ |description=点此进入详细介绍
-|description=This is the description for the first carousel item
+ |image=Example1.jpg
-|link=Article1
+ |link=Main_Page
 }}
 {{CarouselItem
-|image=Example2.jpg
+ |title=查看项目
-|title=Second Item
+ |description=使用语义维基与Cargo整合数据
-|description=This is the description for the second carousel item
+ |image=Example2.jpg
-|link=Article2
+ |link=Projects
 }}
 {{CarouselItem
-|image=Example3.jpg
+ |title=联系我们
-|title=Third Item
+ |description=点击获取联系方式
-|description=This is the description for the third carousel item
+ |image=Example3.jpg
-|link=Article3
+ |link=Contact
 }}
 }}
 </pre>
+{{轮播图
+|content=
+{{CarouselItem
+ |title=欢迎来到本站
+ |description=点此进入详细介绍
+ |image=Example1.jpg
+ |link=Main_Page
+}}
+{{CarouselItem
+ |title=查看项目
+ |description=使用语义维基与Cargo整合数据
+ |image=Example2.jpg
+ |link=Projects
+}}
+{{CarouselItem
+ |title=联系我们
+ |description=点击获取联系方式
+ |image=Example3.jpg
+ |link=Contact
+}}
+}}
 == 参数 ==