flexSlider add class to slide

Question

I have a flexSlider using it as a carousel showing three slides, with a total of 7 slides. I have setup my outer div wrapping the flexslider so that the center slide is centered in the screen and stays the same size as you resize the screen, and the outer slides stay the same size, but show from 0% to 100% of the slide depending on the size of the screen. So as you resize the screen the two outside slides disappear off the screen. This works fine.

I would like to add a class to the first and third (visible) slides that would set the opacity for those slides, and as the carousel transitions to the next slide then I would want to remove the class from the old 1 & 3 slides and place it on the new 1 & 3 slides. This would create the effect that the center (slide 2) is the focus, but you get a preview, post view of the slide as it moves across the screen.

Thank you in advance, code below.

<style type="text/css">
#outer1{
    width:1764px;
    position:absolute;
    overflow:hidden;
}
#inner1{
    width:1800px;
    position:relative;
}
.SlideContent {
    Margin:0 5px;
}
.inactive-slide{
    zoom:1;
    -khtml-opacity: 0.2;
    -moz-opacity:0.2;
    filter: alpha(opacity=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    opacity: 0.2;
}
</style>
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        animation: 'slide',
        easing: "swing",
        animationLoop: true,
        smoothHeight: false, 
        startAt: 0,
        slideshow: true,
        slideshowSpeed: 7000,
        animationSpeed: 600,
        randomize: false,
        useCSS: true,
        pauseOnAction: true,
        pauseOnHover: true, 
        controlNav: false,
        directionNav: true,
        prevText: "Previous",
        nextText: "Next",
        itemWidth: 588,
        itemMargin: 10,
        minItems: 3,
        maxItems: 3

    });
    var x = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
    var ILT = (x - 1764)/2;
    $('#outer1').css({'left':ILT + 'px'});
  });
window.onresize = function ()
{
    var x = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
    var ILT = (x - 1764)/2;
    $('#outer1').css({'left':ILT + 'px'});
 };
</script>
.......
<div id="outer1">
    <div id="inner1" class="flexslider">
      <ul class="slides">
        <li>
          <div class="SlideContent"><img src="image1.jpg" /></div>
        </li>
        <li>
          <div class="SlideContent"><img src="image2.jpg" /></div>
        </li>
        <li>
         <div class="SlideContent"><img src="image3.jpg" /></div>
        </li>
        <li>
          <div class="SlideContent"><img src="image4.jpg"  /></div>
        </li>
        <li>
          <div class="SlideContent"><img src="image5.jpg" /></div>
        </li>
        <li>
          <div class="SlideContent"><img src="image6.jpg" /></div>
        </li>
            <li>
          <div class="SlideContent"><img src="image7.jpg" /></div>
        </li>
      </ul>
    </div>
</div>

Answer 1

如果您希望幻灯片具有响应性（在缩放浏览器窗口时），则需要将宽度和边距设置为百分比。