How to change transition delay in a bootstrap caro

Question

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.

Thanks Sasa

Answer 1

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
        });

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" (for 15 second delay)

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

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>