BxSlider

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

您可以使用自定义的下一个按钮，这是您创建的元素，单击时使用 goToSlide()（在此处的 Public 方法部分阅读更多信息：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);
});

Answer 2

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

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>

将以上 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);
        }
});

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

BxSlider - Custom Next button per slide

html

javascript

css

jquery