Slow down carousel slide show

[lorna.chandler@outlook.com]

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

 

[justsomeguy]

The interval sounds like the thing to change, is there any documentation for the carousel?

[lorna.chandler@outlook.com]

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

[dsonesuk]

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. 

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

[dsonesuk]

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.

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