title: bxSlider onSlideBefore newbieQ
body: <p>I am trying to adjust the opacity of the centre slide in a carousel of three (to emulate this site <a href="http://www.tyinarchitects.com/" rel="nofollow">http://www.tyinarchitects.com/</a>) in a responsive slider using bxSlider, but cannot get the syntax right. </p>
  
  <p>When I use $slideElement.addClass('active-slide'); the effect happens, just on the wrong slides, so while my basic idea works I need to reference the slide using oldIndex and NewIndex rather than $slideElement. </p>
  
  <p>I tried various permutations of:- </p>
  
  <pre><code>$slider.children.eq(oldIndex).removeClass('active-slide');
  $slider.$children.eq(oldIndex).removeClass('active-slide');
  $('.slider2').children.eq(newIndex).addClass('active-slide');
  </code></pre>
  
  <p>And they all just clog up the works so my JS syntax is obviously not right. Can anyone take pity on me? </p>
  
  <p>The complete working code is </p>
  
  <pre><code>$(document).ready(function(){
    $('.slider2').bxSlider({
      slideWidth: 300,
      minSlides: 3,
      maxSlides: 3,
      moveSlides: 1,
      slideMargin: 0,
      pager: false,
      auto: true,
      onSlideBefore: function($slideElement, oldIndex, newIndex){
      $slideElement.addClass('active-slide');
              },
      onSlideAfter: function($slideElement, oldIndex, newIndex){
      $slideElement.removeClass('active-slide');
              }
    });
  </code></pre>