javascript - flexslider 响应式轮播问题

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

这是>1200 屏幕上的滑块截图(很好)

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

我的 JS 初始化:

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

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

最佳答案

这是因为您的 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,
});

关于javascript - flexslider 响应式轮播问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21483428/

Flexslider

javascript - flexslider 响应式轮播问题