lorna.chandler@outlook.com Posted August 28, 2018 Share Posted August 28, 2018 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; } Link to comment Share on other sites More sharing options...
justsomeguy Posted August 28, 2018 Share Posted August 28, 2018 The interval sounds like the thing to change, is there any documentation for the carousel? Link to comment Share on other sites More sharing options...
lorna.chandler@outlook.com Posted August 29, 2018 Author Share Posted August 29, 2018 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?? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 29, 2018 Share Posted August 29, 2018 Bootstrap css controlling the speed, this line .carousel-inner > .item { backface-visibility: hidden; perspective: 1000px; transition: transform 0.6s ease-in-out 0s; } but adjust this to much will affect slide out of current image for the new which may be down to synchronization to other css transitions or JavaScript timer settings. Link to comment Share on other sites More sharing options...
lorna.chandler@outlook.com Posted August 29, 2018 Author Share Posted August 29, 2018 .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... Link to comment Share on other sites More sharing options...
dsonesuk Posted August 29, 2018 Share Posted August 29, 2018 That is not the same line of code. This code is in a a media query and likely placed to take precedence over the other normal css present. notice the css of backface-visibility: hidden; perspective: 1000px; that is the one you should be targetting, i adjusted it to 1.2s and it did slowed it down and continued on at the same speed throughtout. Link to comment Share on other sites More sharing options...
lorna.chandler@outlook.com Posted August 30, 2018 Author Share Posted August 30, 2018 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now