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

问题描述

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

这是我正在使用的 JS:

jQuery('#learni-features .bxslider').bxSlider({模式:'淡入淡出'，使用CSS:假，移动幻灯片:1，pagerCustom: '.tabs-links'});

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

<ul class="tabs-links"><li class="active"><a href="" data-slide-index="0">课程<br>控制</a></li><li><a href=""data-slide-index="1">交互式<br>类</a></li><li><a href=""data-slide-index="2">社交<br>图层</a></li><li><a href=""data-slide-index="3">父母<br>应用</a></li><li><a href=""data-slide-index="4">老师<br>社区</a></li></ul>

这是给画廊的:

<ul class="bxslider clearfix"><li><img src="上传/课程-screen.png" alt=""></li><li><img src="上传/interactive-screen.png" alt=""></li><li><img src="上传/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:

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

这是我创建的 fiddle

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

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

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

解决方案

将你的 bxSlider 赋值给一个变量:

var slider = $('#learni-features .bxslider').bxSlider({模式:'淡入淡出'，使用CSS:假，移动幻灯片:1，pagerCustom: '.tabs-links'});

然后你可以使用 onSlideNext 和 onSlidePrev 为:

slider.onSlideNext(新函数($slideElement, $oldIndex, $newIndex) {//你的代码在这里.});

您可以在 bxSlider 文档创始人这里找到更多信息.

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

this is the JS I am using:

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

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>

and this is for the gallery:

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

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>

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.

Here is a fiddle I created

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..

THe button "Schedule a Demo" by the way is a stand alone button and stays there fixed.

any help will be appreciated Thanks!

解决方案

Assign your bxSlider to a variable:

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

Then you can use onSlideNext and onSlidePrev as:

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

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

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