问题
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
回答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>
来源：https://stackoverflow.com/questions/33641812/how-to-change-transition-delay-in-a-bootstrap-carousel