Javascript BxSlider-每张幻灯片的自定义下一步按钮

我想要达到的是。。。滑块中的形状

你被问到一个问题，然后你点击一个按钮，它会带你进入下一张幻灯片，并提出不同的问题，依此类推。。。下面是这些步骤的示例。（每个蓝色框都是一张新幻灯片）

我想为BxSlider上的每张幻灯片定制一个“下一步”按钮。但我能想出办法

到目前为止，我在这里：

我不知道如何使用java为每张幻灯片更改下一个标记的名称。我只想能够将一些文本粘贴到每个列表项中，并将其用作下一个元素

我希望这是简单的事情

我的html是：

<div class="book-slider-container">
    <span id="slider-next"></span>

    <ul id="top-slider">

        <li>
            <h4>Whats your destination?</h4>
            <div class="destination">
                <div class="full-input">
                    <input type="text" placeholder="I want to go..."></input>
                </div>

            </div>
        </li>


        <li>
            <h4>Where are you going?</h4>
            <div class="destination">
                <div class="full-input">
                    <input type="text" placeholder="I want to go..."></input>
                </div>

            </div>
        </li>

        <li>
            <h4>Choose Your Vehicle</h4>
            <div class="destination">
                <div class="full-input">
                    <input type="text" placeholder="I want to go..."></input>
                </div>

            </div>
        </li>

        <li>
            <h4>Whats your destination?</h4>
            <div class="destination">
                <div class="full-input">
                    <input type="text" placeholder="I want to go..."></input>
                </div>

            </div>
        </li>

    </ul>

</div>

正在调用的JS：

<script src="js/bxslider.js"></script>
<script>
    $('#top-slider').bxSlider({
        adaptiveHeight: true,
        moveSlides: 1,
        pager: false,
        infiniteLoop: false,
        nextSelector: '#slider-next',
        nextText: 'Lets Go',
    });
</script>

$（“#顶部滑块”）.bxSlider({
自适应高度：正确，
第一,，
传呼机：错，
无穷远：错，
下一个选择器：“#滑块下一个”，
下一步：“我们走吧”，
});

在单击use goToSlide（）时，您可以使用自定义的next按钮，即您创建的元素（在此处的Public Methods部分阅读更多信息：） 例如：

你要去哪里？

$（'.next按钮'）。单击（函数（）{
var slideNumber=$（this.data（'target'）；
slider.goToSlide（slideNumber）；
});

使用

bxslider

的选项，并相应地更改文本

onSlideAfter

在每次幻灯片转换后立即执行。函数参数是当前幻灯片元素（转换完成时）

默认值：函数（）{}

选项：函数（$slideElement， oldIndex，newIndex）{//您的代码在这里}

参数：

$slideElement:目标元素的jQuery元素
oldIndex:上一张幻灯片的元素索引（转换前）
newIndex:目标幻灯片的元素索引（转换后）

使用额外的

data-*

属性修改上2个

li

，如下所示：

<li data-next-text="Choose my car">
   <h4>Choose Your Vehicle</h4>
   <div class="destination">
      <div class="full-input">
         <input type="text" placeholder="I want to go..."></input>
      </div>
   </div>
<li>

<li data-next-text="My Details">
    <h4>Whats your destination?</h4>
    <div class="destination">
         <div class="full-input">
              <input type="text" placeholder="I want to go..."></input>
         </div>
    </div>
</li>

您可以使用和更改“下一步”按钮的css，具体取决于您所在的幻灯片索引

<li>
    <h4>Where are you going?</h4>
    <div class="destination">
        <div class="full-input">
            <input type="text" placeholder="I want to go..."></input>
        </div>

    </div>
    <a href="#" class="next-button" data-target="3">Next Question</a>
</li>

$('.next-button').click(function() {
    var slideNumber = $(this).data('target');
    slider.goToSlide(slideNumber);
});

<li data-next-text="Choose my car">
   <h4>Choose Your Vehicle</h4>
   <div class="destination">
      <div class="full-input">
         <input type="text" placeholder="I want to go..."></input>
      </div>
   </div>
<li>

<li data-next-text="My Details">
    <h4>Whats your destination?</h4>
    <div class="destination">
         <div class="full-input">
              <input type="text" placeholder="I want to go..."></input>
         </div>
    </div>
</li>

$('#top-slider').bxSlider({
        adaptiveHeight: true,
        moveSlides: 1,
        pager: false,
        infiniteLoop: false,
        nextSelector: '#slider-next',
        nextText: 'Lets Go',
        onSlideAfter:function($slideElement,oldIndex, newIndex){
            var newText=$slideElement.next().data('next-text'); 
            //newText will have data from its next sibling
            $('.bx-next').text(newText);
        }
});