CODEWITHSUNDEEP
javascriptjqueryhtmlcssbxslider
smanhoff
smanhoff

Reputation: 466

JQuery slider: fade non active slides

I'm working with a horizontal slider using JQuery, now I want something like on these examples below: the first picture show what I have so far. The second one shows want I want to do. The items that are 'none active' so that ones left and right from the center item, need to fade away a bit.

enter image description here

enter image description here

So anybody any idea on how to select the slides that are not active and help me accomplish this?

my code:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <script src="jquery-1.11.0.min.js"></script>
        <script src="jquery.bxslider.min.js"></script>
        <link href="jquery.bxslider.css" rel="stylesheet" />
    </head>
    <body>
        <div class="slider4">
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar1"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar2"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar3"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar4"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar5"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar6"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar7"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar8"></div>
          <div class="slide"><img src="http://placehold.it/300x150&text=FooBar9"></div>
        </div>
    <script type="text/javascript">
    $(document).ready(function(){
      $('.slider4').bxSlider({
        slideWidth: 300,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10,
        infiniteLoop: true
      });
});  
    </script>
    </body>

</html>

Upvotes: 2

Views: 857

Answers (1)

Ziga Petek
Ziga Petek

Reputation: 4110

You can try to use the onSliderLoad and the onSlideAfter option of bxSlider to add a class to the current slide:

    onSliderLoad: function () {
        $('.slider4 > div:not(.bx-clone)').eq(1).addClass('active');
    },
    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
        $('.slide').removeClass('active');
        $($slideElement).next().addClass('active');        
    }

After you manage to add an 'active' class to the active slide, it's just a matter of CSS:

.slide:not(.active){
  opacity:0.8;
}

The above examples are from memory (pseudo-code) and are not intended as a copy-paste solution.

Upvotes: 1

Related Questions