0
我有麻煩我的動畫字幕貓頭鷹輸送帶2這是我到目前爲止有：旋轉木馬貓頭鷹2：麻煩動畫字幕
$(document).ready(function() {
$("#slider").owlCarousel({
margin:0,
autoplay : true,
lazyLoad : true,
items : 1,
autoHeight : true,
animateOut: 'fadeOut',
dotsContainer: '#customDots',
});
$(".owl-item.active h2").addClass('animated');
$(".owl-item.active h3").addClass('animated');
$(".next").click(function(){
$("#slider").trigger('owl.next');
});
$(".prev").click(function(){
$("#slider").trigger('owl.prev');
});
$('.owl-dot').click(function() {
$("#slider").trigger('to.owl.carousel', [$(this).attr('goto'), 500]);
});
$("#slider").on('change.owl.carousel', function(event) {
\t $(".owl-item h2").removeClass('animated');
\t $(".owl-item h3").removeClass('animated');
\t });
\t $("#slider").on('translate.owl.carousel', function(event) {
\t $(".owl-item.active h2").addClass('animated');
\t $(".owl-item.active h3").addClass('animated');
\t });
$('#customDots').css('top', $('#slider').height()-200+"px");
});/*Top Section Design: Carousel*/
#slider{
\t z-index:-5;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
#slider .owl-item img{
display: block;
width: 100%;
height: auto;
}
#slider .owl-item:before{
\t content:"";
\t position:absolute;
\t top:0px;
\t left:0px;
\t width:100%;
\t height:100%;
\t background-color:rgba(0,0,0,0.35);
}
#customDots{
\t width: 100%;
\t position: absolute;
\t top: 50vh;
\t display: inline-block;
\t text-align: center;
\t color: gray;
}
#customDots .owl-dot.active{
\t color: white!important;
}
.customNavigation{
\t position: relative;
\t top: 0;
\t width: 100%;
\t height: 100vh;
\t color: white;
\t z-index: -1;
}
.slide-caption {
position: absolute;
top: 50%;
left: 0;
text-align: center;
width: 100%;
height: 100%;
margin-top: -120px;
z-index: 0;
}
.slide-caption h2{
color: #fff;
font-size: 60px;
font-weight: 800;
line-height: 60px;
text-transform: uppercase;
}
.slide-caption h2 span{
\t color: black;
}
.slide-caption h3{
color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 30px;
margin-bottom: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider" class="owl-carousel">
\t \t <div>
\t \t \t <img src="assets/landing-carousel/11.jpg">
\t \t \t \t <div class="slide-caption">
\t \t \t \t \t <h2 class="bounceInLeft">Something <span>important</span> here</h2>
\t \t \t \t \t <h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
\t \t \t \t </div>
\t \t </div>
\t \t <div>
\t \t \t <img src="assets/landing-carousel/06.jpg">
\t \t \t <div class="slide-caption">
\t \t \t \t \t <h2 class="bounceInRight">Doesn't this <span>design</span> look nice?</h2>
\t \t \t \t \t <h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
\t \t \t \t </div>
\t \t \t </div>
\t \t <div>
\t \t \t <img src="assets/landing-carousel/05.jpg">
\t \t \t <div class="slide-caption">
\t \t \t \t \t <h2 class="bounceInRight">An <span>extraordinary</span> experience</h2>
\t \t \t \t \t <h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
\t \t \t \t </div>
\t \t </div>
\t \t </div>我想說明的是這樣當出現新幻燈片時，它會將動畫類添加到當前幻燈片中，以便動畫出現。並將其從所有其他人身上移除，這樣當它回到前置幻燈片時，它可以再次生成動畫。
它似乎是第一次加載着陸滑塊。然後在下次回到它時停止工作。
讓我知道我做錯了什麼。
這似乎不能解決它對我來說。 – Pabi