logo标签列表

FlexSlider响应式走马灯问题

javascriptcssdrupal-7flexslider
4
我需要使用flexslider创建一个响应式的走马灯。问题是，一旦我将浏览器窗口缩小到容器大小以下，项目位置就会混乱。
这是大于1200屏幕尺寸上的滑块截图（效果不错）: enter image description here 这是大于800屏幕尺寸上的滑块截图（效果糟糕）: enter image description here 我的JS初始化代码:
$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    touch: true,
    mousewheel: true,
    itemWidth: 400,         
    prevText: "",
    nextText: ""
    });

如图（2）所示，第三张图片被裁剪了。我希望在分辨率达到阈值时要么减少可见元素的数量为两个，要么使图像适应可用空间，以便不会裁剪任何内容。有什么想法吗？

你不能只使用CSS并将img宽度设置为33%吗？ - Phil
嗨@phil，滑动时似乎需要重置宽度。此外，包含所有项目的父div的宽度为1000％，因此这并没有帮助。 - Evaldas Raisutis
我明白了。刚刚看了Flexslider的规格。内置的itemWidth选项怎么样？你能把它改成基于百分比的值吗？ - Phil
或者，它们似乎有一个要显示的项目的最小数和最大数选项。如果将两者都设置为3，会怎样？minItems、maxItems - Phil
设置这两个值并移除itemWidth搞得一团糟。将这两个值设定，并将itemWidth保留在400，会产生与之前相同的结果（第三个元素被截断）。 - Evaldas Raisutis
显示剩余4条评论
2个回答
5

这是由于你的flexslider中的itemWidth。你需要编写媒体查询来使宽度在不同设备上灵活变化。在此之前，请添加以下额外的脚本并尝试。

// 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,
});
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接