如何在流体宽度旋转木马中的页面之间创建装订线？

I'm creating a custom carousel for my current project. Here's a simplified version (only tested in Chrome/Mac):

我正在为我当前的项目创建一个自定义轮播。这是一个简化版本(仅在Chrome / Mac中测试过):

http://codepen.io/troywarr/pen/LpQzbv

Note that when the carousel scrolls, you can see that each page (1-5) butts up flush against its neighbor on the left and right sides (looking like a single double-thick border). I'd like to add a 5px-wide gutter between the left and right borders of each page so that the borders don't touch.

请注意,当轮播滚动时,您可以看到每个页面(1-5)与左侧和右侧的邻居齐平(看起来像一个双厚边框)。我想在每个页面的左右边框之间添加一个5px宽的装订线,这样边框就不会碰到。

However, since this is a fluid-width carousel, this has proven to be more difficult than expected.

然而,由于这是一个流体宽度的转盘,事实证明这比预期的要困难得多。

I need to support IE9+, so I can't rely on calc() values or CSS animations; I'd probably need to do this via jQuery .animate(), but when the horizontal position to which I'm animating is basically 100% + 5px, I can't figure out how to express that in code.

我需要支持IE9 +,所以我不能依赖calc()值或CSS动画;我可能需要通过jQuery .animate()来做这件事,但是当我动画的水平位置基本上是100%+ 5px时,我无法弄清楚如何在代码中表达它。

How would I go about that? Is there, perhaps, another clever way to set up the carousel that allows me to use margins, padding, table cell padding, etc. to my benefit? Or, any other ideas? I've played around with different approaches for a couple of hours and I'm running out of ideas.

我该怎么办呢?是否有另一种聪明的方法来设置旋转木马,允许我使用边距,填充,表格细胞填充等,以造福我?或者,还有其他想法吗?我已经玩了几个小时不同的方法,我的想法已经不多了。

UPDATE:

Just to clarify what I mean by "gutter" - I'd like there to be a 5px empty gap between the left and right sides of each page in the carousel. Each page should retain its own borders, but there should be empty whitespace between them (only noticeable on scroll). Here's an example that uses calc() and CSS transitions to do exactly what I want (only tested in Chrome):

只是为了澄清“阴沟”的意思 - 我希望旋转木马中每页的左右两侧之间有5px的空隙。每个页面都应保留自己的边框,但它们之间应该有空白空格(仅在滚动时才会显着)。这是一个使用calc()和CSS转换来完成我想要的(仅在Chrome中测试)的示例:

http://codepen.io/troywarr/pen/GpQYPj

I just need to find a comparable solution that is compatible with IE9+ (which calc() and CSS animations are not).

我只需要找到一个与IE9 +兼容的类似解决方案(其中calc()和CSS动画不兼容)。

1 个解决方案

#1

Applying border-box to everything will allow you to add paddings without breaking the layout.

将边框应用于所有内容将允许您添加填充而不会破坏布局。

// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
   box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

EDIT:

Sorry, you were already doing this. Here is my take on it:

对不起,你已经这样做了。这是我的看法:

.window {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    // Add these two rules
    // The idea is to make a static frame, except for the right column
    // which is the one being repainted.
    border: 5px solid #666;
    border-right: 0;
}

...

.slider li {
    float: left;
    width: 20%;
    height: 100%;
    background-color: #ccc;
    display: table;
    border-right: 5px solid #666; // <- Paint the right column only
 }

1 个解决方案

#1

更多相关文章

随机推荐