javascript flexslider 响应式轮播问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21483428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flexslider responsive carousel problems
提问by Evaldas Raisutis
I need to create a responsive carousel using flexslider. The problem is that one I shrink the browser window below the size of my container, item positions get messed up.
我需要使用 flexslider 创建一个响应式轮播。问题是，当我将浏览器窗口缩小到容器大小以下时，项目位置会混乱。
This is a screenshot of the slider on >1200 screen (fine)
这是 >1200 屏幕上的滑块截图（很好）
This is a screenshot of the slider on >800 screen (!!)
这是 >800 屏幕上的滑块截图 (!!)
My JS init.:
我的 JS 初始化：
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
touch: true,
mousewheel: true,
itemWidth: 400,
prevText: "",
nextText: ""
});
As you can see in image (2), the third image get chopped off. I want to either reduce the number of visible elements to two when the resolution reaches threshold, and make the images adapt to available space so nothing get chopped off. Ideas?
正如您在图像 (2) 中看到的，第三张图像被切掉了。当分辨率达到阈值时，我想将可见元素的数量减少到两个，并使图像适应可用空间，因此没有任何东西被切断。想法？
回答by batMask
It's because of itemWidthon your flexslider. You should write mediaquery to make the width flexible on respective devices. And before that add this extra script and try.
这是因为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,
});
回答by tomcat
A bit late, but it looks like this might solve your problem:
有点晚了，但看起来这可能会解决您的问题：
http://flexslider.woothemes.com/dynamic-carousel-min-max.html
http://flexslider.woothemes.com/dynamic-carousel-min-max.html
The min- and max-items settings are set dynamically, based on window width...
min- 和 max-items 设置是动态设置的，基于窗口宽度...
A bit messy, but it does work so that no image gets chopped of.
有点乱，但它确实有效，因此没有图像被切掉。
