CODEWITHSUNDEEP
jquerycssbxslider
Mikereee
Mikereee

Reputation: 11

BX slider. Adding and removing class to previous slides

I am trying to add a class to each slide navigation bullet that is before the current slide.

Right now it adds a class if you click the next button. However I cant figure out how to remove the class when the previous button is clicked.

Something along the lines of

$(document).ready(function($) {

    slider = $('.slider').bxSlider({

    onSlideBefore: function(){

     var current = slider.getCurrentSlide();
      if (slide-data-index <= current) {
        $('.bx-pager .bx-pager-item a').addClass('past');
      } else {
        $('.bx-pager .bx-pager-item a').removeClass('past');
    }
});

This is what I have working so far: http://jsfiddle.net/mreee/xVnQY/

I cant figure out assign a variable for slides

Upvotes: 0

Views: 4483

Answers (1)

MarsOne
MarsOne

Reputation: 2186

One thing I do not understand is why is your CSS, HTML and jQuery Inconsistent with each other other. The classes or elements you are referring to in your CSS and jQuery are nowhere in the HTML. I'm just guessing that you have not pasted the full HTML.

Anyway,I checked you code and have posted a much simpler and easy to understand solution for you.I did not make any changes in the HTML/CSS so I shall only paste the jQuery. Also I have referenced the bxslider JS file externally in the fiddle which you can see on the left hand pane.

This is the refernce to the external bxslider file.

http://bxslider.com/lib/jquery.bxslider.min.js

jQuery

jQuery(document).ready(function () {
    $('.slider').bxSlider({
        mode: 'horizontal',
        speed: 500,
        pager: true,
        controls: true,
        auto: false,
        infiniteLoop: false,
        hideControlOnEnd: true,
        onSlideNext: function () {
            $('.slider h3').addClass('blueylooey');
        },
        onSlidePrev: function () {
            $('.slider h3').removeClass('blueylooey');
        }  
    });

});

Here is a Working Demo

Upvotes: 1

Related Questions