lorna.chandler@outlook.com
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by lorna.chandler@outlook.com
-
-
.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; }
Slow down carousel slide show
in JavaScript
Posted
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>