Bxslider字幕动画

Question

我正在使用bxslider，我想为幻灯片的文本制作不同的动画。

当幻灯片向左滑动时，我希望文本框固定在中间，文本淡入/淡出。

有什么想法吗？我试了一整天

这是一支钢笔：Codepen

HTML:

<div class="bxslider" id="banner">
<div>
<img src="img" />
<h3 class="msl-title"><a href="#" title="Test Article">Test Article</a></h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title"><a href="#" title="Test Article">Test Article</a></h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title"><a href="#" title="Test Article">Test Article</a></h3>
</div>
</div>

JS:

$(document).ready(function(){
$('.bxslider').bxSlider();
});

CSS：

#banner .msl-title {
width: 80%;
max-width: 350px;
top: 50%;
background: white;
padding: 40px;
position: relative;
margin: auto;
overflow: auto;
display: table;
height: 160px;
text-align: center;
transform: translateY(-65%);
border: 5px solid #61beb1;}

Answer 1

为了实现这一点，您需要一种不同的方法，因为文本框位于滑块内部，因此很难修复，但如果您将文本框放在滑块包装之外，则可以使用自定义bxslider 简单地控制行为

$(document).ready(function(){
$('.msl-title').find('a').text( 
$('#banner').children().first('div').data('text') );
$('.bxslider').bxSlider({'onSlideBefore':function(el,oldIndex,newIndex){
$('.msl-title').fadeOut(200,function(){
$('.msl-title').find('a').text($(el).data('text'));  
$(this).stop().fadeIn(200);
});
}});
});

使用jQuery中的数据属性，您可以为div 中的每张幻灯片设置Text

<div data-text="Slide 1">

工作演示https://codepen.io/Teobis/pen/zLpWKM

希望这能帮助

Answer 2

设法找到了解决方案。只需从滑块标题中获取信息，并将其打印在外部div 中

var slideActive = $('.msl-item.active-slide .msl-title.active-text a').attr( "title" );
$( ".slider-title-box h3" ).text( slideActive );

第一行是寻找幻灯片标题，第二行是在新的分区中打印

我给了.slider-title-box绝对的位置，这样它就可以放在滑块上了。

希望这能帮助另一个尝试实现