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

Question

我当前正在运行 bxslider 以使用自定义分页器仅显示一个段落和一个标题。此 slider 部分垂直分割，幻灯片位于左侧，自定义寻呼机位于右侧。

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

我认为实现此目的的最佳方法是向每张幻灯片添加一个 data- 属性，然后将其用作附加到自定义分页器的类，该类又将用于更改背景图像。

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，这两个类都会添加到 slider 导航中。

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

返回一个 bool 值，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"