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>

这个文本也需要是动态的，所以当我点击选项卡或箭头时，它也会改变该框中的文本，它基本上属于每张幻灯片（信息框）。问题是这个盒子在＆＃34;循环之外＃34;滑块。
有没有办法可以触发2个滑块？带有图像的主画廊，同时框中的文字。

这是我创建的fiddle

请注意滑块正在工作，但底部还有另一个div，其中包含一个＆＃34; info＆＃34;我希望从同一个主滑块控制div，并在那里更改文本..

按钮＆＃34;安排演示＆＃34;顺便说一句，这是一个独立的按钮，并保持固定。

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

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中找到更多信息。

bxslider一键更改2个滑块

1 个答案: