Salman Salman - 5 months ago 31
Javascript Question

Adding effect to the bootstrap carousel slides

I'm using the bootstrap carousel as in its website and there are 3 slides that each contains an image and a div of texts.
I want to manipulate it as on slide change, the texts animated from right to left.
I've included the code snippet and I'll appreciate your help.



var $carousel = $('#myCarousel');
$carousel.bind('slide.bs.carousel', function(e) {
$('#myCarousel .item .container div').animate({
'top': '-50px',
'opacity': '0.5'
// transition: 'all 0.5s all 0.4s ease-in-out',
},500);
$('#myCarousel .item.active .container div').animate({
// transition: 'all 0.5s all 0.4s ease-in-out',
'top': '0',
'opacity': '1'
},500);
});

<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>

<body>

<div class="container">
<br>
<div id="myCarousel" class="carousel slide" 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">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>

<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>

<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>

</div>
</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>
</div>

</body>

</html>




Answer

It may be that the issue is that you're attempting both of the animations in the slide.bs.carousel handler, so they are both being applied to the same element. If you break it up into the slide.bs.carousel (which happens before the slide) and slid.bs.carousel (which happens after the new slide) events, you'll have better control of the "pre"/"post" slide.

Check here for an example. I used slideUp instead of animate, but you should be able to replace with whatever animation you want. https://jsfiddle.net/sheldon_griffin/zz9nwng3/1/

$('#myCarousel').on('slide.bs.carousel', function(e) {
  $('.carousel-caption').hide();
}).on('slid.bs.carousel', function(e) {
  $('.active .carousel-caption').slideToggle('slow');
});