bx-slider 将字幕与图片一起滑动到外部

Question

我正在尝试弄清楚如何在 bx-slider class 之外滑动自定义字幕。我只找到了类似于此 here 的答案，它使用图像属性，但我的问题是我希望能够在 div 内滑动标题和图像，与 [=26] 分开=], 如果可能的话。

到目前为止我有这个：

HTML:

<!--image slider desktop-->
<div id="hero">
   <ul class="bxslider">
      <li>
         <a href="www.google.com">
           <img src="http://placehold.it/350x150" class="slider-img-responsive">
         </a>
       </li>
       <li>
         <a href="www.google.com">
          <img src="http://placehold.it/350x150" class="slider-img-responsive">
         </a>
       </li>
    </ul>
</div>
<!-- slider text-->
<div class="mobile-homepage-header">
    <!-- TODO: slide text relative to image slider-->
    <ul id="slider-text" style="list-style-type:none;padding:0;">
        <li>
            <h1>Lorem ipsum 1</h1>
            <h2>Lorem ipsum dolor sit 1</h2>
            <a href="www.google.com">Button 1</a>
        </li>
        <li>
            <h1>Lorem ipsum 2.</h1>
            <h2>Lorem ipsum dolor sit 2</h2>
            <a href="www.google.com">Button 2</a>
        </li>
    </ul>
</div>

JQuery:

$('#hero .bxslider').bxSlider({
   auto: true,
   infiniteLoop: true,
   pager: false,
   controls: true,
   pause: 5000,
   onSliderLoad: function(currentIndex) {
       $('#slider-text li').html($('.bxslider li').eq(currentIndex)); // select the current index of the slider
   },
   onSlideBefore: function($slideElement, oldIndex, newIndex) {
       $('#slider-text li').html($slideElement); // slide text along with image
   }
});

Answer 1

听起来你想要的这个字幕框和滑块的功能是一样的。我制作了 2 个 bxSliders:

.bxslider修改如下：
- 被var bx引用
- 删除了 onSliderLoad() 回调
- 已将 onSlideBefore() 回调更改为新函数 syncTextSlider
#slider-text修改如下：
- 实例化为 bxSlider
- 被var cx引用
- 注：controls: false
定义了一个新函数syncTextSlider
- 在 .bxslider 移动到新幻灯片之前，调用 syncSliderText。
- 此函数然后在 #slider-text
由于 #slider-text 的动作取决于 .bxslider 的动作，因此我删除了 #slider-text 的控制。
样式化 .bxslider 两个滑块之间的控件，如果您更喜欢它们在原始位置，只需删除位于 <head> 内的 <style> 块中的样式。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>35486338</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    /* Remove style to relocate controls to original position */
    .bx-controls-direction a {
      top: 125% !important;
    }
  </style>
</head>

<body>
  <!--image slider desktop-->
  <div id="hero">
    <ul class="bxslider">
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/0ff/?text=1" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/fff/?text=2" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/e00/?text=3" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/f3f/?text=4" class="slider-img-responsive">
        </a>
      </li>
      <li>
        <a href="www.google.com">
          <img src="http://placehold.it/350x150/000/3f3/?text=5" class="slider-img-responsive">
        </a>
      </li>
    </ul>
  </div>
  <!-- slider text-->
  <div class="mobile-homepage-header">
    <ul id="slider-text">
      <li>
        <h1>Title 1</h1>
        <h2>Byline 1</h2>
        <a href="www.google.com">Button 1</a>
      </li>
      <li>
        <h1>Title 2</h1>
        <h2>Byline 2</h2>
        <a href="www.google.com">Button 2</a>
      </li>
      <li>
        <h1>Title 3</h1>
        <h2>Byline 3</h2>
        <a href="www.google.com">Button 3</a>
      </li>
      <li>
        <h1>Title 4</h1>
        <h2>Byline 4</h2>
        <a href="www.google.com">Button 4</a>
      </li>
      <li>
        <h1>Title 5</h1>
        <h2>Byline 5</h2>
        <a href="www.google.com">Button 5</a>
      </li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
    var bx = $('.bxslider').bxSlider({
      auto: true,
      infiniteLoop: true,
      pager: false,
      controls: true,
      pause: 5000,
      onSlideBefore: syncTextSlider
    });

    var cx = $("#slider-text").bxSlider({
      infiniteLoop: true,
      pager: false,
      controls: false
    });

    function syncTextSlider($ele, from, to) {
      cx.goToSlide(to);
    }
  </script>
</body>

</html>

bx-slider 将字幕与图片一起滑动到外部

bx-slider sliding outside captions along with the image

html

javascript

jquery

bxslider