lorna.chandler@outlook.com

ok I can't find that in my code... where should i put it? css section: .carousel-control.right, .carousel-control.left { background-image: none; color: #fdd818; } .carousel-indicators li { border-color: #fdd818; } .carousel-indicators li.active { background-color: #fdd818; } .carousel-inner > .item { position: relative; display: none; -webkit-transition: 100s ease-in-out left; -moz-transition: 100s ease-in-out left; -o-transition: 100s ease-in-out left; transition: 100s ease-in-out left; } .item h4 { font-size: 19px; color: white; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 90px; } .item span { font-style: normal; } <h2 class="yellow">What our customers say:</h2> <div id="myCarousel" class="carousel slide text-center" data-ride="carousel"style="width:100%"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>"some text"</h4> </div> <div class="item"> <h4>"some text"</h4> </div> <div class="item"> <h4>"more text"</h4> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script> $(document).ready(function(){ // Activate Carousel $("#myCarousel").carousel({interval: 10000}); // Enable Carousel Indicators $(".item1").click(function(){ $("#myCarousel").carousel(0); }); $(".item2").click(function(){ $("#myCarousel").carousel(1); }); $(".item3").click(function(){ $("#myCarousel").carousel(2); }); $(".item4").click(function(){ $("#myCarousel").carousel(3); }); // Enable Carousel Controls $(".left").click(function(){ $("#myCarousel").carousel("prev"); }); $(".right").click(function(){ $("#myCarousel").carousel("next"); }); }); </script>

.carousel-inner > .item { position: relative; display: none; -webkit-transition: 100s ease-in-out left; -moz-transition: 100s ease-in-out left; -o-transition: 100s ease-in-out left; transition: 100s ease-in-out left; } this is how I have that section right now... are these causing a conflict? it is still just speeding right by...

I changed the interval but it doesn't change the speed any... I am sure that it is supposed to... and it does right after I hit ctr+f5, but after a few minutes it is speeding through again. I got this code from https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp. I would also like it to pause when the mouse is hovering over the text. So I added this $(document).ready(function(){ // Activate Carousel $("#myCarousel").carousel({interval: 10000 pause: "hover"}); but it isn't pausing... do I need to do something different??

I have a carousel on a webpage for customer comments. It works great except it moves too fast. I have searched the code but can't figure out how to slow it down. I have changed the $(document).ready(function(){ // Activate Carousel $("#myCarousel").carousel({interval: 5000}); i tried changing the interval time to 20,000 even 200,000 but it didn't make a difference on the webpage. I am not sure what else to try. <h2 class="yellow">What our customers say:</h2> <div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>"some content."</h4> </div> <div class="item"> <h4>"more content"</h4> </div> <div class="item"> <h4>"one more comment."</h4> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script> $(document).ready(function(){ // Activate Carousel $("#myCarousel").carousel({interval: 20000}); // Enable Carousel Indicators $(".item1").click(function(){ $("#myCarousel").carousel(0); }); $(".item2").click(function(){ $("#myCarousel").carousel(1); }); $(".item3").click(function(){ $("#myCarousel").carousel(2); }); $(".item4").click(function(){ $("#myCarousel").carousel(3); }); // Enable Carousel Controls $(".left").click(function(){ $("#myCarousel").carousel("prev"); }); $(".right").click(function(){ $("#myCarousel").carousel("next"); }); }); </script> and the css portion is: .carousel-control.right, .carousel-control.left { background-image: none; color: #fdd818; } .carousel-indicators li { border-color: #fdd818; } .carousel-indicators li.active { background-color: #fdd818; } .carousel-inner > .item { position: relative; display: none; -webkit-transition: 5s ease-in-out left; -moz-transition: 5s ease-in-out left; -o-transition: 5s ease-in-out left; transition: 5s ease-in-out left; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; }