Jump to content

Slow down carousel slide show


Recommended Posts

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

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

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

.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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...