Possible to use bxslider getCurrentSlide method to assign a class to the active slide?

Question

I'm using bxslider with captions only. Using CSS, I've stacked the captions on top of each another. What I want to do now is assign the active caption(or "slide") a class, so I can change its background color.

Could this be done using one of the bxslider callback functions (they're all listed out at http://bxslider.com/options)? I would think I could use getCurrentSlide to accomplish what I need, but I'm not exactly sure how to go about this.

Here's the HTML snippet for the slider.

<div class="bx-wrapper">
 <div class="bx-viewport">
  <ul class="bxslider">
   <li>
    <div class="imageContainer">
      <a href="/">
       <img src="">
      </a>
    </div>
    <div class="captionContainer">
     <p class="captionTitle">Some text</p>
     <p class="captionBlurb">Some more text</p>
    </div>
   </li>
   <li>
    <div class="imageContainer">
      <a href="/">
       <img src="">
      </a>
    </div>
    <div class="captionContainer">
     <p class="captionTitle">Some text</p>
     <p class="captionBlurb">Some more text</p>
    </div>
   </li>
   <li>
    <div class="imageContainer">
      <a href="/">
       <img src="">
      </a>
    </div>
    <div class="captionContainer">
     <p class="captionTitle">Some text</p>
     <p class="captionBlurb">Some more text</p>
    </div>
   </li>
  <ul>
 </div>
</div>

I know I need to start off with something like...

slider = $('.bxslider').bxSlider();
var current = slider.getCurrentSlide();

score 2 · Answer 1 · answered Mar 20 '14 at 02:49

I know this is old, but I just had the same problem. Here's how I solved it.

 slider = $('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  slideWidth: 850,
  moveSlides: 1,
  onSliderLoad: function() {
    $(".bxslider li:not([class='bx-clone'])").eq(0).addClass('current');
  },
  onSlideBefore: function() {
    $(".bxslider li").removeClass('current');
    current = slider.getCurrentSlide();
    $(".bxslider li:not([class='bx-clone'])").eq(current).addClass('current');
  }
});

In my case, I have the slider with three images wide. The middle one is in the center of the screen and the two on either side go off screen. I wanted to have a class for the middle, "current", slide. So this was my method.

The code in onSliderLoad(); adds the class initially to the first item.

I wanted it to add the "current" class to the next item before it made it to center (just before transition starts), so these two lines are in the onSliderBefore(); function:

current = slider.getCurrentSlide();
$(".bxslider li:not([class='bx-clone'])").eq(current).addClass('current');

Otherwise you could move those two lines to the onSliderAfter(); function and the "current" class would get added after the slide has transitioned.

score 0 · Answer 2 · answered May 24 '13 at 14:36

0

Have you actually tried the piece of JavaScript you included?

it should be as simple as assigning the classname:

current.addClass('yourClassName);

Perhaps I've misunderstood the question?

answered May 24 '13 at 14:36

johnkavanagh

4,614
2
25
37

Good point. Perhaps I was overthinking it. It doesn't seem to be working, though - the class isn't being applied. I added the JS I'm using to call bxslider, the HTML from my initial post and the line of CSS to change the background color to this fiddle: http://jsfiddle.net/astewes/gAj2x/ - any idea what I'm doing wrong? – manh2244 May 24 '13 at 15:02

Possible to use bxslider getCurrentSlide method to assign a class to the active slide?

2 Answers2