Question

我想要实现的是......滑块内的一个表单。

你被问到一个问题，然后你点击一个按钮，它会带你到下一张幻灯片，带有不同的问题等等......下面是一个步骤的例子。（每个蓝框都是一张新幻灯片）

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

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

我不知道如何使用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>

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

使用bxslider的 onSlideAfter 选项并相应更改文字。

onSlideAfter

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

默认： function（）{}

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

参数：

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

使用额外li属性修改最后2 data-*，如下所示：

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

将以上function添加到您的插件初始化

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

Answer 2

您可以使用自定义下一个按钮，即您创建的元素，点击使用goToSlide（）（在此处阅读更多公共方法部分：http://bxslider.com/options）例如：

<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);
});

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

2 个答案: