javascript - jQuery jCarousel - 在水平视口(viewport)内对齐元素

Question

我的 jcarousel 安装有问题。目前我如何设置它是连续三个元素，视口(viewport)为 1140 像素。 jcarousel 会自动调整这些元素并将它们设置为 380px 宽以正确适合视口(viewport)。 margin-right 似乎也是自动定义的。我在证明我的三个元素在视口(viewport)内均匀对齐时遇到问题。我查看了 jcarousel 选项，但没有找到任何可能有帮助的东西。这是一张可以解释我的问题的屏幕截图:

http://i.imgur.com/PRQIG.jpg

编辑:我找到了一个解决方案，这是我唯一能想到的。如果有人知道更好的解决方案，请发布!

我的页面基于 1140 响应式网格系统。在我的网格系统中，三列行的右边距约为 3.8%，每列的宽度约为 30%。因此，对于轮播的水平视口(viewport) (.jcarousel-clip-horizo​​ntal)，我将其宽度设置为 103.8% 而不是 100%，这允许三个元素在页面容器中平均扩展。

我试图调整个别元素的边距和填充，但这是不正确的。起初，我在轮播容器上放置了一个左内边距，以使其外观居中，但这对于我的响应式布局来说还不够。

Answer 1

如果您不喜欢 jcarousel 自动设置的宽度，您可以使用 jcarousel 设置在 setupCallback:function(){} 中自行设置

例如:你想设置每个li的宽度为375，你可以这样做:

$('#a').jcarousel({
        visible:3,
        scroll:3,
        setupCallback:function(){
           $('#a.jcarousel-list li').each(function(){
                $(this).width(375)
           })
        },
})

您可以使用 setupCallback:function(){} 修改每个元素或视口(viewport)上的填充/边距，以实现您想要的效果。