javascript - 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

为了实现这个你需要一个不同的方法，因为盒子在 slider 里面，很难固定，但是如果你把文本框放在 slider 包装器外面你可以简单地用自定义 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

希望对你有帮助