CODEWITHSUNDEEP
javascriptjquerycssbxslider
babusi
babusi

Reputation: 520

Target active slide and add css class

I'm using the bx slider with 3 items in the viewport and I need it have a css class for the active list item (in this case the middle child) but it isn't working.

Here's the HTML and javascript:

        <ul class="bxslider" id="slider1">
               <li><img src="img/img-a.png" />

              </li>
              <li><img src="img/img-b.png" />

              </li>
              <li><img src="img/img-c.png" />

              </li>

        </ul>


<script type="text/javascript">
    $(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
<script type="text/javascript">
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    $('#slider1 li').removeClass('active-slide');   
    $('#slider1>li').eq(currentSlideHtmlObject + 1).addClass('active-slide')
//     $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
}

And the CSS:

#slider1 li{ 
   opacity:0.5;
   width:290px;
}


#slider1 .active-slide{
  opacity:1;
}

EDIT: JSFIDDLE

Upvotes: 0

Views: 4621

Answers (1)

MarsOne
MarsOne

Reputation: 2186

There are not many issues on SO regarding bxslider. I did a lot of research on your question and got a solution but i also have a few doubts in my mind. Let me explain

  1. There are very few resources or demo's of bxslider on the web.
  2. The websites itself lists a few demo's but does not provide any source code or proper tutorials for the same.
  3. The solution i got uses a different callback from the one prescribed on the website. Funny enough, the callback method on the website does not work for me.

Ok, so here are the changes i made.

  1. Enclosed the <ul> inside a <div>.
  2. Made few changes in the CSS.
  3. Changed a major portion in the Jquery.

The changes in the HTML and CSS are negligible and hence i will only paste the Jquery Here. For the full changes and to see the solution in action check this fiddle.

Working Solution.

Solution with Black & White Effect

$(document).ready(function () {
    $('#slider').bxSlider({
        auto: true,
        pause: 2000,
        autoHover: true,
        controls: false,
        displaySlideQty: 3,
        moveSlideQty: 1,
        onAfterSlide: function (currentSlide, totalSlides, currentSlideHtmlObject) {
            var $middleSlide = currentSlide + 2;
            $('#slider li').css({
                opacity: 0.2
            });
            $('#slider li:eq(' + $middleSlide + ')').animate({
                opacity: 1
            }, 100);
        }
    });

});

Now as you can see the major change I made is that i am not adding any class to the li , but directly changing the opacity through jquery directly.

Also if you see, the callback i am using is 'onAfterSlide'. The 'onSlideAfter' callback does not for me. Instead i tried 'onAfterSlide' and this works.

EDIT: I checked up a bit more on the issue. Turns out that the bxslider script file i am referencing is the older 3.0 version and hence the callbacks were different in that. The newest version is 4.1.1 and the callback mentioned on the site work with this version.

It is all a bit confusing and there is not much documention on the website to clarify this. here is the external link to the newer version of bxslider.

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

Upvotes: 3

Related Questions