咨询：非Carousel组件的滑块切换时长设置位置

问题描述 #

我不是UI开发人员，接手一段代码后想找到设置滑块切换至下一张幻灯片时长的位置（未使用Carousel组件）。原本以为CSS里有transition相关设置，但没找到，现在想修改这个延迟时长让用户选合适参数。相关代码如下：

CSS代码 #

/* Slider */
.da-left {
    margin-top: -35px;
}
.slider-top {
    background: linear-gradient(110deg, rgba(1,1,1,.35) 0%, rgba(1,1,1,.35) 85%, rgba(255,255,255,0) 85.03%);
    margin-top: 70px;
    height: 130px;
    padding-right: 70px;
    padding-left: 50px;
    color: white;
    text-decoration: underline;
    text-decoration-color: #cecbe6;
    display: block;
    width: 458pt;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: bold;
    font-size: 2.4em;
    line-height: 130px;
}
.slider-diagonal-line {
    width: 75px;
    display: inline-block;
    border-bottom: 2px solid #cecbe6;
    position: relative;
    left: -25px;
    top: -10px;
    -webkit-transform: translateY(28px) rotate(110deg);
    -moz-transform: translateY(28px) rotate(110deg);
    -ms-transform: translateY(28px) rotate(110deg);
    -o-transform: translateY(28px) rotate(110deg);
    transform: translateY(28px) rotate(110deg);
}
.slider-icon {
    display: inline-block;
    float: right;
    margin-right: 15px;
    margin-top: -15px;
}
.slider-icon img {
    width: 80px;
    height: 55px;
}
.slider-description {
    display: block;
    float: left;
    width: 65%;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF;
    font-family: 'Nunito Sans', sans-serif !important;
}
.slider-square {
    background: rgba(1, 1, 1, .35);
    width: 50px;
    height: 79pt;
    display: table-cell;
}
.slider-bottom {
    background: linear-gradient(110deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 85%, rgba(255,255,255,0) 85.2%);
    height: 81px;
    padding: 15px 70px 15px 15px;
    color: white;
    display: table-cell;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 18pt;
    line-height: 27px;
    letter-spacing: -0.52px;
    max-width: 450px;
}
.da-img img {
    max-width: 65%;
    max-height: 80%;
    margin-top: 40px;
}

HTML代码 #

<div id="da-slider" data-interval="1000" class="da-slider d-none d-sm-block" style="background-image: url(&quot;Content/Images/Slider/Backgrounds/CapeHatterasLighthouse.jpg&quot;); background-position: 50% 0%;">
  <asp:SqlDataSource ID="SqlSlider" runat="server" ConnectionString='<%$ ConnectionStrings:CONSTR %>' SelectCommand="spQuerySlider" SelectCommandType="StoredProcedure">
  </asp:SqlDataSource>
  <asp:Repeater ID="SliderRepeater" DataSourceID="SqlSlider" runat="server">
    <ItemTemplate>
      <div class="da-slide" style="<%# Eval(&quot;Visible&quot;)%>">
        <a href="<%# Eval(&quot;URL&quot;) %>">
          <div class="da-left">
            <div class="slider-top"><%# Eval(&quot;Title&quot;) %> </div>
            <div class="slider-square"></div>
            <div class="slider-bottom">
              <div class="slider-description"><%# Eval(&quot;Text&quot;) %> </div>
              <div class="slider-diagonal-line"></div>
              <div class="slider-icon">
                <img src="<%=ConfigurationManager.AppSettings[&quot;StyleHubBaseUrl&quot;]%>assets/img/Slider Icons/
                                   <%# Eval(&quot;IconFileName&quot;) %>" />
              </div>
            </div>
          </div>
        </a>
        <div class="da-img">
          <a href="<%# Eval(&quot;URL&quot;) %>">
            <img src="<%=ConfigurationManager.AppSettings[&quot;StyleHubBaseUrl&quot;]%>assets/img/Slider Images/
                               <%# Eval(&quot;ImageFileName&quot;) %>" />
          </a>
        </div>
      </div>
    </ItemTemplate>
  </asp:Repeater>
  <div class="da-arrows">
    <span class="da-arrows-prev"></span>
    <span class="da-arrows-next"></span>
  </div>
</div>

解决方案 #

• 直接修改HTML中#da-slider的data-interval属性值：当前data-interval="1000"代表1000毫秒（1秒）的自动切换间隔，你可以修改这个数值调整延迟时长（比如改为3000就是3秒）。
• 查找对应滑块的JavaScript文件：你提供的代码里没有包含控制滑块逻辑的JS，而切换动画的过渡时长（不是间隔，是切换过程的动画速度）大概率在这个JS文件里，里面会有类似transitionDuration或者animationSpeed的参数，修改对应毫秒值即可调整动画快慢。
• 实现用户自定义参数：如果要让用户选择合适参数，可以添加一个下拉框/输入框，监听用户选择事件，通过JavaScript动态修改data-interval属性，同时更新JS内部的定时器间隔，让设置实时生效。

内容的提问来源于stack exchange，提问作者DotNetter