Question

我目前正在使用自定义寻呼机运行bxslider以显示段落和标题。此滑块部分垂直分割，左侧是幻灯片，右侧是自定义分页器。

自定义寻呼机包含一个背景图像，我想在每张新幻灯片中更改这些图像。

我认为实现这一目标的最佳方法是为每张幻灯片添加一个数据属性，然后将其用作附加到自定义寻呼机的类，而后者又将用于更改背景图像。

HTML

<section class="why-uk2 clearfix">
    <div class="wrapper">
    <div class="why-uk2-slider">
        <article data-show="first" >
            <h2>Experience</h2>
            <p>You can trace our timeline back more than 15 years, so you can rely on us to have been there, done that, and got a better t-shirt. Whether you want wordpress, a template or to hand-code your website we’ve done it all before and can help you get online fast.</p>
        </article>
        <article data-show="second" >
            <h2>Experience</h2>
            <p>You can trace our timeline back more than 15 years, so you can rely on us to have been there, done that, and got a better t-shirt. Whether you want wordpress, a template or to hand-code your website we’ve done it all before and can help you get online fast.</p>
        </article>
        <article data-show="third" >
            <h2>Experience</h2>
            <p>You can trace our timeline back more than 15 years, so you can rely on us to have been there, done that, and got a better t-shirt. Whether you want wordpress, a template or to hand-code your website we’ve done it all before and can help you get online fast.</p>
        </article>
        <article data-show="fourth" >
            <h2>Experience</h2>
            <p>You can trace our timeline back more than 15 years, so you can rely on us to have been there, done that, and got a better t-shirt. Whether you want wordpress, a template or to hand-code your website we’ve done it all before and can help you get online fast.</p>
        </article>
        </div>

 <nav class="why-uk2-nav">
        <div class="why-uk2-nav-first"><a data-slide-index="0" href=""></a></div>
        <div class="why-uk2-nav-second"><a data-slide-index="1" href=""></a></div>
        <div class="why-uk2-nav-third"><a data-slide-index="2" href=""></a></div>
        <div class="why-uk2-nav-fourth"><a data-slide-index="3"  href=""></a></div>
    </nav>
    </div>
</section>

JS - 只要我选择下一张或上一张幻灯片，它就可以使用当前添加和删除的类。如果我选择幻灯片1然后幻灯片3，则两个类都会添加到滑块导航中。

$('.why-uk2-slider').bxSlider({
    pagerCustom: '.why-uk2-nav',
    mode: 'vertical',
    controls: true,
    slideMargin: 100,
    easing: 'easeInOutQuart',
    speed: 850,

    onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {         

                    var $datashow = $('.why-uk2-slider article').eq(currentSlideHtmlObject+1).attr('data-show'),
                        $datahide = $('.why-uk2-nav').hasClass( $datashow );
                    $('.why-uk2-nav').removeClass( $datahide ).addClass( $datashow )
              }
});

提前感谢您的帮助！

Answer 1

你的考试：

$datahide = $('.why-uk2-nav').hasClass( $datashow );

返回一个布尔值，true / false，而不是任何类名。

这应该有效：

$('.why-uk2-slider').bxSlider({
    pagerCustom: '.why-uk2-nav',
    mode: 'vertical',
    controls: true,
    slideMargin: 100,
    easing: 'easeInOutQuart',
    speed: 850,
    last : "first", // Save last class
    onSlideBefore: function (
        currentSlideNumber, 
        totalSlideQty, 
        currentSlideHtmlObject) {         
        var $datashow = $('.why-uk2-slider article')
            .eq(currentSlideHtmlObject+1)
            .attr('data-show');

        // Open your console to view this, remove it when OK.
        console.log("REMOVE: " + this.last, 
                    "ADD   : " + $datashow,
                    "class : " + $('.why-uk2-nav').attr("class")
        );

        $('.why-uk2-nav').removeClass(this.last).addClass($datashow);

        this.last = $datashow; // Save current as last for next time.
    }
});

并将其添加到您的HTML中：

<nav class="why-uk2-nav first">
                         |
                         +------ class of first

在您的原始代码中，您最终将永远不会删除课程。在您通过所有幻灯片循环后，why-uk2-nav将具有：

className = "why-uk2-nav first second third fourth"

bxslider - 为每张幻灯片添加和删除新的css类

1 个答案: