bxslider 一键更改 2 个滑块

Question

我在带有缩略图的选项卡式画廊上使用 Bxslider 而且效果很好。箭头和选项卡工作正常。

这是我正在使用的 JS：

jQuery('#learni-features .bxslider').bxSlider({
  mode: 'fade',
  useCSS: false,
  moveSlides: 1,
  pagerCustom: '.tabs-links'
});

这是 HTML： 这是针对标签的：

<ul class="tabs-links">
        <li class="active"><a href="" data-slide-index="0">Curriculum <br>Control</a></li>
        <li><a href="" data-slide-index="1">Interactive <br>Classes</a></li>
        <li><a href="" data-slide-index="2">Social <br>Layer</a></li>
        <li><a href="" data-slide-index="3">Parent<br> App</a></li>
        <li><a href="" data-slide-index="4">Teacher <br>Community</a></li>
</ul>

这是给画廊的：

<ul class="bxslider clearfix">
    <li>
        <img src="uploads/curriculum-screen.png" alt="">
    </li>
    <li>
        <img src="uploads/interactive-screen.png" alt="">
    </li>
<li>
        <img src="uploads/social-screen.png" alt="">
    </li>

    <li>
        <img src="uploads/parent-screen.png" alt="">
    </li>


    <li>
        <img src="uploads/teacher-community-screen.png" alt="">
    </li>
 </ul>

我有另一个带有文本的浮动 div：

<div class="info">
    <ul class="slider2">
    <li>
        <h3>All Your Learning Tools in One Place</h3>
        <p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
    </li>

    <li>
        <h3>Access course books, Learnies</h3>
        <p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
    </li>

    <li>
        <h3>Create and begin your new class sessions</h3>
        <p>Access course books, Learnies, assignments and learning assets from one place. Review your past lesson plans and easily answer your students’ questions. Create and begin your new class sessions!</p>
    </li>


</ul>


 </div>

此文本也需要是动态的，因此当我单击选项卡或箭头时，它也会更改该框中的文本，该文本基本上属于每张幻灯片（信息框）。问题是这个框在滑块的“循环”之外。
有没有办法可以触发 2 个滑块？带有图像的主图库，同时还有框中的文本。

这是我创建的fiddle

请注意滑块正在工作，但底部有另一个 div 具有“信息”类，我希望从同一个主滑块控制该 div 并更改那里的文本..

顺便说一下，“安排演示”按钮是一个独立的按钮，并且固定在那里。

任何帮助将不胜感激 谢谢！

Answer 1

将你的 bxSlider 分配给一个变量：

var slider = $('#learni-features .bxslider').bxSlider({
  mode: 'fade',
  useCSS: false,
  moveSlides: 1,
  pagerCustom: '.tabs-links'
});

那么你可以使用onSlideNext和onSlidePrev作为：

slider.onSlideNext(new function($slideElement, $oldIndex, $newIndex) {
    //Your code here.
});

您可以在bxSlider文档创始人here找到更多信息。