如何更改自举轮播中的过渡延迟 [英] How to change transition delay in a bootstrap carousel

问题描述

我正在尝试减慢主页上推荐滑块中的过渡.我该在哪里做?我试图在css文件中更改引导程序，但不会这样做.我一直遇到的问题是，当我更改过渡时，它不会在每个过渡之间做".这是网址:www.urbandogex.com.任何帮助表示赞赏.我试图完成这个网站.我也希望证明引号(文字)居中.

Im trying to slow down the transition in the testimonial slider on main page. Where would I do that? I tried to change in the css file, bootstrap, but it wouldn't do it. The problem I keep having is that when I change the transition, it does not do it "between" each transition. Here is the url: www.urbandogex.com. Any help is appreciated. Im trying to finish this site. I also would like the testimonial quotes (text) to be centered.

谢谢 莎莎

推荐答案

推荐不是旋转滑块，而是自举轮播.要更改其时间间隔，请打开scripts.js并在以下内容中编辑interval: 1500值:

The testimonials is not a revolution slider, it is a bootstrap carousel. To change the interval for that, open up scripts.js and edit the interval: 1500 value in the following:

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

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

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

This is to change a Revolution Slider: It looks like the theme you're using has an outdated version of the revolution slider (3.0.8) for which there isn't much documentation (if any) available. This is just a guess, but you could try adding the following property to your <li> tags in your main html file:

data-delay="15"(延迟15秒)

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

In your code, for a 15 second delay, try:

<!-- 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中更改delay属性:

If you update to the latest (5.0), you can change the delay property in the javascript where the slider is initialized in your html file:

<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>

这篇关于如何更改自举轮播中的过渡延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！