flexSlider 将类添加到幻灯片

Question

我有一个 flexSlider 将它用作显示三张幻灯片的轮播，总共 7 张幻灯片。我已经设置了包裹 flexslider 的外部 div，以便中心幻灯片在屏幕中居中并保持与调整屏幕大小相同的大小，并且外部幻灯片保持相同大小，但显示幻灯片的 0% 到 100%取决于屏幕的大小。因此，当您调整屏幕大小时，两个外部幻灯片会从屏幕上消失。这工作正常。

我想在第一张和第三张（可见）幻灯片中添加一个类，以设置这些幻灯片的不透明度，并且当轮播转换到下一张幻灯片时，我想从旧的 1 & 中删除该类3 张幻灯片并将其放在新的 1 和 3 幻灯片上。这将创建中心（幻灯片 2）是焦点的效果，但是当幻灯片在屏幕上移动时，您会获得幻灯片的预览和后视图。

提前谢谢你，代码如下。

<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

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