模板

轮播图：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,957次编辑
小无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,957次编辑
小无编辑摘要
第3行： 第3行：
     {{#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=]]
       [[File:{{{图1}}}|center|350px|link=]]
      {{#if:{{{图1标题|}}}|<div class="carousel-caption">{{{图1标题}}}</div>}}
     </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=]]
       [[File:{{{图2}}}|center|350px|link=]]
      {{#if:{{{图2标题|}}}|<div class="carousel-caption">{{{图2标题}}}</div>}}
     </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=]]
       [[File:{{{图3}}}|center|350px|link=]]
      {{#if:{{{图3标题|}}}|<div class="carousel-caption">{{{图3标题}}}</div>}}
     </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=]]
       [[File:{{{图4}}}|center|350px|link=]]
      {{#if:{{{图4标题|}}}|<div class="carousel-caption">{{{图4标题}}}</div>}}
     </div>
     </div>
     }}
     }}
  </div>
 
  <!-- 标题遮罩层 -->
  <div class="carousel-titles-overlay" style="position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.6)); padding: 20px 0 15px;">
    <div class="carousel-titles-container" style="display: flex; justify-content: center; align-items: flex-end; gap: 15px; padding: 0 50px;">
      {{#if:{{{图1标题|}}}|
      <div class="carousel-title-item active" data-slide="0" style="flex: 1; max-width: 250px; cursor: pointer;">
        <div class="title-text" style="color: white; font-size: 14px; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;">{{{图1标题}}}</div>
        <div class="title-indicator" style="height: 3px; background: #ff6600; margin-top: 8px; transition: all 0.3s;"></div>
      </div>
      }}
      {{#if:{{{图2标题|}}}|
      <div class="carousel-title-item" data-slide="1" style="flex: 1; max-width: 250px; cursor: pointer;">
        <div class="title-text" style="color: white; font-size: 14px; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图2标题}}}</div>
        <div class="title-indicator" style="height: 3px; background: transparent; margin-top: 8px; transition: all 0.3s;"></div>
      </div>
      }}
      {{#if:{{{图3标题|}}}|
      <div class="carousel-title-item" data-slide="2" style="flex: 1; max-width: 250px; cursor: pointer;">
        <div class="title-text" style="color: white; font-size: 14px; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图3标题}}}</div>
        <div class="title-indicator" style="height: 3px; background: transparent; margin-top: 8px; transition: all 0.3s;"></div>
      </div>
      }}
      {{#if:{{{图4标题|}}}|
      <div class="carousel-title-item" data-slide="3" style="flex: 1; max-width: 250px; cursor: pointer;">
        <div class="title-text" style="color: white; font-size: 14px; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0.7;">{{{图4标题}}}</div>
        <div class="title-indicator" style="height: 3px; background: transparent; margin-top: 8px; transition: all 0.3s;"></div>
      </div>
      }}
    </div>
   </div>
   </div>
    
    
   <!-- 左右切换按钮 -->
   <!-- 左右切换按钮 -->
   <button class="carousel-btn carousel-prev" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; padding: 10px 15px; cursor: pointer; font-size: 18px; border-radius: 3px;">‹</button>
   <div class="carousel-btn carousel-prev" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; width: 40px; height: 40px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background 0.3s;">
   <button class="carousel-btn carousel-next" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; padding: 10px 15px; cursor: pointer; font-size: 18px; border-radius: 3px;">›</button>
    <span style="display: inline-block; transform: translateX(-2px);">‹</span>
 
   </div>
  <!-- 指示器 -->
  <div class="carousel-btn carousel-next" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; width: 40px; height: 40px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background 0.3s;">
  <div class="carousel-indicators" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px;">
     <span style="display: inline-block; transform: translateX(2px);">›</span>
    {{#if:{{{图1|}}}|<span class="indicator active" data-slide="0" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.7;"></span>}}
    {{#if:{{{图2|}}}|<span class="indicator" data-slide="1" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5;"></span>}}
     {{#if:{{{图3|}}}|<span class="indicator" data-slide="2" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5;"></span>}}
    {{#if:{{{图4|}}}|<span class="indicator" data-slide="3" style="width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; opacity: 0.5;"></span>}}
   </div>
   </div>
</div></includeonly><noinclude>
</div></includeonly><noinclude>

2025年9月28日 (日) 21:19的版本

如果您发现WIKI上的错误，请加入：1033192730联系站点工作人员处理
检索自“http://cznwiki.com/index.php?title=模板:轮播图&oldid=676”