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

Question

我想要实现的是... slider 内的表单。

你被问到一个问题，然后你点击一个按钮，它会带你到下一张有不同问题的幻灯片，依此类推......下面是这些步骤的一个例子。 (每个蓝色框是一张新幻灯片)

我想为 BxSlider 上的每张幻灯片自定义下一个按钮。但可以弄清楚如何做到这一点。

到目前为止我在这里:http://pagedev.co.uk/alltransfers/

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

我希望它很简单!

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

CSS:

.bx-wrapper {
    position: relative;
    width:100%;
    max-width:970px;
    margin: 0 auto;
    padding: 0;
    *zoom: 1;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {

    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
}

/* LOADER */

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(../images/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: -8%;
    background: url(../images/prev.png);
    width: 29px;
    height: 68px;
    margin-top:-15px;
    text-indent: -9999px;
    z-index: 9999;
    position: absolute;
    top: 50%;
}

.bx-wrapper .bx-next {
    right: -8%;
    background: url(../images/next.png);
    width: 29px;
    height: 68px;
    margin-top:-15px;
    text-indent: -9999px;
    z-index: 9999;
    position: absolute;
    top: 50%;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}




/* Booking Slider */
.book-slider-wrapper {
    width:100%;
    max-width:500px;
    height:auto;
    margin:0px auto;
    padding:30% 0% 30% 0%;
    z-index:999;
}

.book-slider-container {
    width:100%;
    height:auto;
    margin:0px auto;
    position:relative;
}

#slider-next    {
    font-family: 'montserratregular';
    font-size:20px;
    line-height:24px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#ffffff;
    display:inline-block;
    padding-bottom:4px;
    border-bottom:2px solid #ffffff;

    position:absolute;
    bottom:30px;
    left:50%;
    margin-left:-49px;
    z-index:99999;
}

#slider-next a {
    text-decoration:none;
}

#slider-next a:hover {
    color:#ffc200;
    padding-bottom:4px;
    border-bottom:2px solid #ffc200;
}

#book-slider {
    width:100%;
    max-width:500px;
    height:auto;
    margin:0px auto;

}

.book-slider-wrapper li {
    background-color:#219eff;
    width:100%;
    height:auto;
    padding:2% 0px;
    margin-right:5%;

    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px; /* future proofing */
    -khtml-border-radius: 12px; /* for old Konqueror browsers */
}

.book-slider-wrapper li h4 {
    font-family: 'montserratlight';
    font-size:27px;
    color:#ffffff;
    display:block;
    margin-bottom:30px;
    letter-spacing:1px;
}


.book-slider-wrapper li .destination {
    width:70%;
    height:65px;
    margin:0px auto;
    padding-left:15%;
    text-align:left;

    background: url(../images/footer-book-icon.png) no-repeat left; 
    background-size:15%;
    background-color:#ffffff;

    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -khtml-border-radius: 7px;
    margin-bottom:20px;
}

.book-slider-wrapper li .full-input input  {
    width:90%;
    height:60px;
    margin-bottom:20px;

    border-left:1px solid #bcc0c6;

    font-family: 'montserratlight';
    font-size:21px;
    line-height:25px;
    color:#313943;

    -webkit-appearance: none;
    border:none;
    outline:none;
}

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>

Answer 1

利用 onSlideAfter bxslider 的 选项并相应地更改文本。

onSlideAfter

Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).

default: function(){}

options: function($slideElement, oldIndex, newIndex){ // your code here }

arguments:

$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)

使用额外的 data-* 属性修改你的 Last 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>

将上面的函数添加到你的插件初始化

$('#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);
        }
});