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

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

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

第一行是查找幻灯片标题，第二行是在新的div中打印它。

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

我希望这能帮助另一个试图实现这一目标的人

Answer 2

为了实现这一点，你需要一种不同的方法，因为框在滑块内部，很难固定，但如果你把文本框放在滑块包装之外，你可以简单地用自定义的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中每张幻灯片的文本

<div data-text="Slide 1">

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

希望这能有所帮助