bxslider一次更改2个滑块 [英] bxslider change 2 sliders at one click

问题描述

我使用Bxslider在标签画廊与缩略图
和它的工作伟大。

I am using Bxslider on a tabbed gallery with thumbnails and it works great. the arrows and the tabs are working perfectly.

这是我使用的JS：

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

这是HTML：
这是用于标签：

and this is the HTML: this is for the tabs:

<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与文本：

I have another floating div with text:

<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滑块？

this text needs to be also dynamic so when I click either on the tabs or the arrows it will change the text in that box too which basically belongs to each slide (information box). the thing is that this box is outside the "loop" of the slider.
is there a way I can trigger 2 sliders? the main gallery with the images and at the same time the text in the box.

这里是一个 fiddle 我创建了

注意滑块是工作，但底部有另一个div info，我想让div从同一个主滑块控制，并改变其中的文本。

Notice the slider is working but there is another div at the bottom with a class of "info" and I want that div to be controlled from the the same main slider and change the text there..

按钮安排演示的方式是

任何帮助将被感谢
谢谢！

any help will be appreciated Thanks!

推荐答案

将bxSlider分配给一个变量：

Assign your bxSlider to a variable:

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

然后您可以使用 onSlideNext 和 onSlidePrev as：

Then you can use onSlideNext and onSlidePrev as:

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

您可以在bxSlider文档创建者中找到更多信息此处。

You can find out more information in the bxSlider documents founder here.

这篇关于bxslider一次更改2个滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！