如何更改引导轮播中的转换延迟

Question

我试图减慢主页上推荐滑块的过渡。我会在哪里做呢？我试图更改css文件，引导程序，但它不会这样做。我一直遇到的问题是，当我更改过渡时，它不会在每个过渡“之间”进行。这是网址：www.urbandogex.com。任何帮助表示赞赏。我试图完成这个网站。我还希望将推荐引述（文本）居中。

谢谢 莎莎

Answer 1

推荐不是一个革命滑块，它是一个引导轮播。要更改它的时间间隔，请打开 scripts.js 并在以下内容中编辑 interval: 1500 值：

/*******************************  carousel  ***********************************/

    $('.carousel').carousel({
          interval: 1500
        });

这是为了更改革命滑块：您使用的主题似乎具有过时版本的革命滑块 (3.0.8)，没有太多可用的文档（如果有的话）。这只是一个猜测，但您可以尝试将以下属性添加到您的主 html 文件中的 <li> 标记中：

data-delay="15"（延迟 15 秒）

在您的代码中，延迟 15 秒，尝试：

<!-- Slider -->
        <article class="bannercontainer" style="overflow: visible;">
            <div class="banner  revslider-initialised tp-simpleresponsive" id="revslider-765" style="height: 789px;">
                <ul style="display: block; overflow: hidden; width: 100%; height: 100%; max-height: 800px;">                        
                    <li data-transition="fade" data-slotamount="1" data-delay="15" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;">
                        <div class="slotholder"><img src="./Urban Dog Excursions, Issaquah, WA, Issaquah Highlands, Klahanie, Sammamish, Mirrormont, Tiger Mt., Tiger Mountain, dog walking, dog walker, dog walkers, pet sitter, pet sitting, dog sitting, cat sitting, pet transportation_files/slider01.jpg" alt="//" class="defaultimg" style="width: 1894px; height: 1263px; opacity: 0; position: relative;"></div>
                        <div class="caption lfb  tp-caption start" data-x="left" data-y="top" data-speed="800" data-start="300" data-easing="easeOutBack" style="font-size: 17px; padding: 0px; margin: 0px; border-width: 0px; line-height: 24px; white-space: nowrap; min-width: 0px; min-height: 0px; transform: scale(1, 1) rotate(0deg); opacity: 1; left: 347px; top: 849px; visibility: visible;">       
                            <p><span>Pet Sitting</span>With me your pet is treated like<br> family. Loving care, companionship, <br>and fun.</p>
                            <a href="http://www.urbandogex.com/services.html" class="">Services/Pricing</a>
                        </div>                                 
                    </li>

                    <li data-transition="3dcurtain-vertical" data-slotamount="1" data-delay="15" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1; position: absolute;">
                        <div class="slotholder"><img src="./Urban Dog Excursions, Issaquah, WA, Issaquah Highlands, Klahanie, Sammamish, Mirrormont, Tiger Mt., Tiger Mountain, dog walking, dog walker, dog walkers, pet sitter, pet sitting, dog sitting, cat sitting, pet transportation_files/slider02.jpg" alt="//" class="defaultimg" style="width: 1894px; height: 1263px; opacity: 0;"></div>
                        <div class="caption lfb  tp-caption start" data-x="left" data-y="top" data-speed="800" data-start="400" data-easing="easeOutBack" style="font-size: 17px; padding: 0px; margin: 0px; border-width: 0px; line-height: 24px; white-space: nowrap; min-width: 0px; min-height: 0px; transform: scale(1, 1) rotate(0deg); opacity: 1; left: 347px; top: 849px; visibility: visible;">   
                            <p><span>Dog Walking</span> Make a difference in how your dog <br>feels about himself after a  <br>healthy daily walk.</p>
                            <a href="http://www.urbandogex.com/Services.html" class="">Services</a>
                        </div>  
                    </li> 

                    <li data-transition="papercut" data-slotamount="1" data-delay="15" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 20; opacity: 1; position: absolute; transform: scale(1, 1) translate(0px, 0px) rotate(0deg);">
                        <div class="slotholder"><img src="./Urban Dog Excursions, Issaquah, WA, Issaquah Highlands, Klahanie, Sammamish, Mirrormont, Tiger Mt., Tiger Mountain, dog walking, dog walker, dog walkers, pet sitter, pet sitting, dog sitting, cat sitting, pet transportation_files/slider03.jpg" alt="//" class="defaultimg" style="width: 1894px; height: 1263px; opacity: 1;"></div>
                        <div class="caption lfb  tp-caption start" data-x="left" data-y="top" data-speed="1000" data-start="500" data-easing="easeOutBack" style="top: 0px; font-size: 17px; padding: 0px; margin: 0px; border-width: 0px; line-height: 24px; white-space: nowrap; min-width: 0px; min-height: 0px; transform: scale(1, 1) rotate(0deg); opacity: 1; left: 347px; visibility: visible;">    
                            <p><span>Pet Taxi</span> I make sure your pet gets to <br>his appointments.</p>
                            <a href="http://www.urbandogex.com/Services.html" class="">Pet Taxi</a>
                        </div>                                    
                    </li> 
                </ul>
            <div class="tp-loader" style="display: none;"></div><div class="tp-bannertimer" style="visibility: hidden; width: 28.5169%; overflow: hidden;"></div></div>
        <div class="tp-bullets simplebullets round hidebullets" style="bottom: 20px; left: 50%; margin-left: -55px;"><div class="bullet first"></div><div class="bullet"></div><div class="bullet last"></div><div class="tpclear"></div></div><div style="position: absolute; top: 20px; margin-top: -20px; left: 20px;" class="tp-leftarrow tparrows default hidearrows"></div><div style="position: absolute; top: 20px; margin-top: -20px; right: 20px;" class="tp-rightarrow tparrows default hidearrows"></div></article>
        <!-- End Slider -->

如果您更新到最新（5.0），您可以在 html 文件中初始化滑块的 javascript 中更改延迟属性：

<script>    
jQuery(document).ready(function() {     
   jQuery("#slider1").revolution({
      sliderType:"standard",
      sliderLayout:"auto",
      delay:9000, //<-- change this value (in milliseconds)
      navigation: {
          arrows:{enable:true}              
      },            
      gridwidth:1230,
      gridheight:720        
    });     
}); 
</script>