jquery - Bootstrap Carousel not working in IE -
i have carousel fades next slide. works fine in chrome , firefox doesn't seem fade in or out in ie. suggestions on how fix this? here code similar mine:
html:
<div id="carousel" class="carousel slide carousel-fade"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="active item"></div> <div class="item"></div> <div class="item"></div> </div> <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel" data-slide="next">›</a> </div>
css:
.carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } html, body, .carousel, .carousel-inner, .carousel-inner .item { height: 100%; } .item:nth-child(1) { background: silver; } .item:nth-child(2) { background: red; } .item:nth-child(3) { background: orange; }
js:
$('#carousel').carousel();
Comments
Post a Comment