bxslider - adding and removing new css class with each slide

Question

I am currently running bxslider to show just a paragraph and a title, using a custom pager. This slider section is split vertically with the slide on the left and the custom pager on the right.

The custom pager contains a background image which I would like to change with every new slide.

I thought the best way to achieve this would be to add a data- attribute to each slide then use that as a class which gets appended to the custom pager, which in turn will be used to change the background image.

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 - This works as far as it currently adds and removes the class, but only if i select the next or previous slide. If I select slide 1 then slide 3 both classes are added to the slider navigation.

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

Thanks for the help in advance!

Answer 1

Your test:

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

return a boolean, true / false and not any class name.

This should work:

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

And add this to your HTML:

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

---

In effect in your original code you will end up with never removing a class. After you have looped trough all slides the why-uk2-nav will have:

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