flexslider响应轮播问题

Question

我需要使用flexslider创建一个响应式旋转木马。问题是，我将浏览器窗口缩小到容器大小以下，项目位置搞砸了。

这是＆gt; 1200屏幕（精）滑块的屏幕截图

这是＆gt; 800屏幕（!!）上滑块的屏幕截图

我的JS初始化：

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    touch: true,
    mousewheel: true,
    itemWidth: 400,         
    prevText: "",
    nextText: ""
    });

正如您在图像（2）中看到的那样，第三张图像被斩断。我希望在分辨率达到阈值时将可见元素的数量减少到两个，并使图像适应可用空间，以免被切断。想法？

Answer 1

这是因为你的flexslider上的itemWidth。您应该编写mediaquery以使宽度在各个设备上灵活。在此之前添加这个额外的脚本并尝试。

// tiny helper function to add breakpoints
var getGridSize = function() {
  return (window.innerWidth < 600) ? 1 :
         (window.innerWidth < 900) ? 2 : 3;
}

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 200,
    itemMargin: 40,
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize(), // use function to pull in initial value
    directionNav: true,
    controlNav: false,
    slideshow: false,
});

Answer 2

有点晚了，但看起来这可能会解决你的问题：

http://flexslider.woothemes.com/dynamic-carousel-min-max.html

min-和max-items设置是根据窗口宽度动态设置的......

有点乱，但它确实有效，所以没有图像被砍掉。