bxslider change 2 sliders at one click

Question

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!

Answer 1

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.