Question

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

我想在第一张和第三张（可见）幻灯片中添加一个类来设置这些幻灯片的不透明度，当轮播转换到下一张幻灯片时，我想从旧的1＆amp;中删除该类;将3张幻灯片放在新的1＆amp; 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

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

flexSlider添加要滑动的类

1 个答案: