0
다음과 같은 이미지가 있습니다. 
그리고이 트럭을 슬라이드 쇼에 적용하려고합니다. 초기에 슬라이드 쇼를 this 예와 결합하려고 시도했지만 작동하지 않았습니다. 아이디어는 슬라이드가 "무료 배송"으로 바뀌면 슬라이드 트럭이 오른쪽에서 왼쪽으로 이동한다는 것입니다 (현재 위치). 내가 할 수있는 방법이 있니? 그리고이 슬라이드 쇼가 나는 그들은 준비가 만든 애니메이션을 많이 제공 https://daneden.github.io/animate.css/슬라이드 쇼 내에서 트럭을 어떻게 움직일 수 있습니까?
에서 animate.css에서보세요
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="animation/car_anim.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
#Image_Car
{
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/hand.jpg" alt="Chania" width="977" height="230">
</div>
<div class="item">
<img src="img/shipping.jpg" alt="Chania" width="977" height="230">
</div>
<div class="item">
<img src="img/hand.jpg" alt="Flower" width="977" height="230">
</div>
<div class="item">
<img src="img/hand.jpg" alt="Flower" width="977" height="230">
</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>
<script>
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function($) {
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function() {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function() {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
</script>
<script>
</script>
</body>
</html>