模板

轮播图：修订间差异

来自卡厄思梦境WIKI

←上一编辑
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,957次编辑
小无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,957次编辑
小无编辑摘要
 
（未显示同一用户的1个中间版本）
第1行： 第1行：
<includeonly>
<includeonly>
{{ResourceLoader|Carousel.js}}
<div class="carousel-container" style="width: 100%; height: 280px; position: relative; overflow: hidden; background: #f0f0f0;"
<div class="carousel-container" style="width: 100%; height: 240px; position: relative; overflow: hidden; background: #f0f0f0;">
    data-autoplay="{{{自动播放|1}}}" data-interval="{{{间隔|4000}}}">
   <div class="carousel-wrapper" style="display: flex; height: 100%; transition: transform 0.5s ease;">
   <div class="carousel-wrapper" style="display: flex; height: 100%; transition: transform 0.5s ease;">
     {{#if:{{{图1|}}}|
     {{#if:{{{图1|}}}|
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
       [[File:{{{图1}}}|center|link={{{图1跳转|}}}]]
       [[File:{{{图1}}}|center|class=carousel-img|link={{{图1跳转|}}}]]
     </div>
     </div>
     }}
     }}
     {{#if:{{{图2|}}}|
     {{#if:{{{图2|}}}|
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
       [[File:{{{图2}}}|center|link={{{图2跳转|}}}]]
       [[File:{{{图2}}}|center|class=carousel-img|link={{{图2跳转|}}}]]
     </div>
     </div>
     }}
     }}
     {{#if:{{{图3|}}}|
     {{#if:{{{图3|}}}|
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
       [[File:{{{图3}}}|center|link={{{图3跳转|}}}]]
       [[File:{{{图3}}}|center|class=carousel-img|link={{{图3跳转|}}}]]
     </div>
     </div>
     }}
     }}
     {{#if:{{{图4|}}}|
     {{#if:{{{图4|}}}|
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
     <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;">
       [[File:{{{图4}}}|center|link={{{图4跳转|}}}]]
       [[File:{{{图4}}}|center|class=carousel-img|link={{{图4跳转|}}}]]
     </div>
     </div>
     }}
     }}
第26行： 第26行：
    
    
   <!-- 标题遮罩层 -->
   <!-- 标题遮罩层 -->
   <div class="carousel-titles-overlay" style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); padding: 15px 0 10px;">
   <div class="carousel-titles-overlay">
     <div class="carousel-titles-wrapper" style="position: relative; padding: 0 50px;">
     <div class="carousel-titles-wrapper" style="position: relative; display: flex; align-items: center; padding: 0 50px;">
       <!-- 左切换按钮 -->
       <!-- 左切换按钮 -->
       <div class="carousel-btn carousel-prev" style="position: absolute; left: 30px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; opacity: 0.8; transition: opacity 0.3s;">[[File:swiper_button_left.png|10px|link=]]</div>
       <div class="carousel-btn carousel-prev" style="position: absolute; left: 30px; top:40%; transform: translateY(-50%); cursor: pointer; z-index: 20; opacity: 0.85; transition: all 0.3s;">[[File:swiper_button_left.png|10px|link=]]</div>
        
        
       <!-- 标题容器 -->
       <!-- 标题容器 -->
       <div class="carousel-titles-container" style="display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 0 auto;">
       <div class="carousel-titles-container" style="display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 0 auto; max-width: calc(100% - 120px);">
         {{#if:{{{图1标题|}}}|
         {{#if:{{{图1标题|}}}|
         <div class="carousel-title-item active" data-slide="0" style="flex: 1; max-width: 200px; cursor: pointer;">
         <div class="carousel-title-item active" data-slide="0" style="flex: 1; max-width: 200px; cursor: pointer; min-width: 0;">
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;">{{{图1标题}}}</div>
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;">{{{图1标题}}}</div>
           <div class="title-indicator" style="height: 2px; background: #ff6600; margin-top: 6px; transition: all 0.3s;"></div>
           <div class="title-indicator" style="height: 2px; background: #ff6600; margin-top: 6px; transition: all 0.3s;"></div>
第40行： 第40行：
         }}
         }}
         {{#if:{{{图2标题|}}}|
         {{#if:{{{图2标题|}}}|
         <div class="carousel-title-item" data-slide="1" style="flex: 1; max-width: 200px; cursor: pointer;">
         <div class="carousel-title-item" data-slide="1" style="flex: 1; max-width: 200px; cursor: pointer; min-width: 0;">
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图2标题}}}</div>
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图2标题}}}</div>
           <div class="title-indicator" style="height: 2px; background: transparent; margin-top: 6px; transition: all 0.3s;"></div>
           <div class="title-indicator" style="height: 2px; background: transparent; margin-top: 6px; transition: all 0.3s;"></div>
第46行： 第46行：
         }}
         }}
         {{#if:{{{图3标题|}}}|
         {{#if:{{{图3标题|}}}|
         <div class="carousel-title-item" data-slide="2" style="flex: 1; max-width: 200px; cursor: pointer;">
         <div class="carousel-title-item" data-slide="2" style="flex: 1; max-width: 200px; cursor: pointer; min-width: 0;">
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图3标题}}}</div>
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图3标题}}}</div>
           <div class="title-indicator" style="height: 2px; background: transparent; margin-top: 6px; transition: all 0.3s;"></div>
           <div class="title-indicator" style="height: 2px; background: transparent; margin-top: 6px; transition: all 0.3s;"></div>
第52行： 第52行：
         }}
         }}
         {{#if:{{{图4标题|}}}|
         {{#if:{{{图4标题|}}}|
         <div class="carousel-title-item" data-slide="3" style="flex: 1; max-width: 200px; cursor: pointer;">
         <div class="carousel-title-item" data-slide="3" style="flex: 1; max-width: 200px; cursor: pointer; min-width: 0;">
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图4标题}}}</div>
           <div class="title-text" style="color: white; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图4标题}}}</div>
           <div class="title-indicator" style="height: 2px; background: transparent; margin-top: 6px; transition: all 0.3s;"></div>
           <div class="title-indicator" style="height: 2px; background: transparent; margin-top: 6px; transition: all 0.3s;"></div>
第60行： 第60行：
        
        
       <!-- 右切换按钮 -->
       <!-- 右切换按钮 -->
       <div class="carousel-btn carousel-next" style="position: absolute; right: 30px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; opacity: 0.8; transition: opacity 0.3s;">[[File:swiper_button_right.png|10px|link=]]</div>
       <div class="carousel-btn carousel-next" style="position: absolute; right: 30px; top: 40%; transform: translateY(-50%); cursor: pointer; z-index: 20; opacity: 0.85; transition: all 0.3s;">[[File:swiper_button_right.png|10px|link=]]</div>
     </div>
     </div>
   </div>
   </div>
第67行： 第67行：
{{面包屑|模板}}
{{面包屑|模板}}
{{轮播图
{{轮播图
|图1=banner_001.png
|图1=banner_001.jpg
|图1标题=2025年10月22日确定全球上线！
|图1标题=2025年10月22日确定全球上线！
|图2=banner_002.png
|图2=banner_002.jpg
|图2标题=事前登录正式开放
|图2标题=事前登录正式开放
|图3=banner_003.png
|图3=banner_003.jpg
|图3标题=《卡厄思夢境》官方社群媒体资讯
|图3标题=《卡厄思夢境》官方社群媒体资讯
|图4=banner_004.png
|图4标题=招募與《卡厄思梦境》合作的创造者！
}}
}}
[[分类:模板]]
[[分类:模板]]
</noinclude>
</noinclude>

2025年10月14日 (二) 16:57的最新版本

如果您发现WIKI上的错误，请加入：1033192730联系站点工作人员处理


文件:Banner 001.jpg
文件:Banner 002.jpg
文件:Banner 003.jpg
2025年10月22日确定全球上线！
事前登录正式开放
《卡厄思夢境》官方社群媒体资讯
检索自“http://cznwiki.com/index.php?title=模板:轮播图&oldid=1905”