coolnirdh
commented
12 years ago Example for the same:
<html>
<head>
<link href="twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
#bannerHidden {
position:absolute;
left:0px;
top:0px;
opacity:0;
z-index:2;
}
.bannerContainer {
position:relative;
}
.carouselHidden {
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p>Sorry, insert NavBar on your own!</p>
</div>
</div>
<div class="row">
<div class="span12 bannerContainer">
<div id="banner1" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="index.html">
<img src="twitter-bootstrap/docs/assets/img/banner1.jpg" alt="">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Read More...</p>
</div>
</a>
</div>
<div class="item">
<a href="index.html">
<img src="twitter-bootstrap/docs/assets/img/banner2.jpg" alt="">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Read More...</p>
</div>
</a>
</div>
</div>
<a class="left carousel-control" href="#banner1" data-slide="prev">‹</a>
<a class="right carousel-control" href="#banner1" data-slide="next">›</a>
</div>
<div id="bannerHidden" class="carousel carouselHidden">
<div class="carousel-inner">
<div class="item active">
<a href="index.html">
<img src="twitter-bootstrap/docs/assets/img/banner1.jpg" alt="">
<div class="carousel-caption">
<h4>Welcome to Fraczine!</h4>
<p>Read More...</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<p>Something else</p>
</div>
</div>
</div>
<script src="twitter-bootstrap/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-transition.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-alert.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-modal.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-tab.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-popover.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-button.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
<script src="twitter-bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
<script>
$(document).ready(function(){
$("#banner1").bind("slid", function(){
$(".carousel-caption").slideUp("normal");
$("#bannerHidden").addClass("carouselHidden");
});
$("#banner1").bind("slide", function(){
$("#bannerHidden").removeClass("carouselHidden");
});
$("#banner1").mouseenter(function(){
$(".carousel-caption").slideDown("normal");
});
$("#banner1").mouseleave(function(){
$(".carousel-caption").slideUp("normal");
});
$("#banner1").carousel("cycle");
$(".carousel-caption").slideUp("normal");
});
</script>
</body>
</html>
If during the carousel transition, mouseenter event is triggered, the slide transition gets interrupted. Moreover, after that, the pause event stops to work upon mouseover. I tried to solve this problem by creating a second carousel exactly over the first one, with opacity set to 0. However, this second carousel is only put up at slide event of carousel, and removed by setting display:none upon slid event of the carousel. I hope this helps someone who faces the same issue.