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 < / p>

$(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

希望这会有所帮助

Answer 2

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

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

第一行正在寻找幻灯片标题，第二行正在将其打印在新的div中。

我为.slider-title-box赋予了绝对位置，使其适合滑块。

希望这有助于另一个尝试实现这一目标

Bxslider字幕动画

2 个答案: