flexslider 响应式轮播问题

Question

我需要使用 flexslider 创建一个响应式轮播。问题是，当我将浏览器窗口缩小到容器大小以下时，项目位置会混乱。

这是>1200 屏幕上的滑块截图（很好）

这是 >800 屏幕上的滑块截图 (!!)

我的 JS 初始化：

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

正如您在图像 (2) 中看到的，第三张图像被切掉了。当分辨率达到阈值时，我想将可见元素的数量减少到两个，并使图像适应可用空间，因此没有任何东西被切断。想法？

Answer 1

这是因为itemWidth在你的 flexslider 上。您应该编写 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,
});