css3自定义滑块_制作自适应CSS3图像滑块

css3自定义滑块

Previously, I’ve demonstrated how to make a fixed-width CSS image slider. Increasingly, web developers desire solutions that not only scale across viewport sizes, but perform well on mobile devices. The responsive solution detailed here is particularly well-suited to those goals, as it avoids JavaScript entirely, running purely in CSS (and thus faster, smoother, and with less overhead).

之前，我已经演示了如何制作固定宽度CSS图像滑块 。 Web开发人员越来越需要不仅在视口大小范围内扩展，而且在移动设备上具有良好性能的解决方案。 这里详细介绍的响应式解决方案特别适合这些目标，因为它完全避免了JavaScript ，而只在CSS中运行(因此更快，更流畅，并且开销更少 )。

The idea is very similar to the previous example: an “imagestrip” containing all the photographs of our slider moving inside a window element which works to restrict the visibility of elements outside it. For this example, you’ll need four images, although in practice you could make a strip with as many images as you wished. The sole condition is that all the images must be exactly the same size.

这个想法与前面的示例非常相似：一个“图像带”，其中包含我们滑块的所有照片，它们在窗口元素内移动，以限制其外部元素的可见性。 对于此示例，您将需要四张图像，尽管在实践中，您可以根据需要创建带有多个图像的条。 唯一的条件是所有图像的大小必须完全相同。

创建带有图像带的响应框架 (Create A Responsive Frame With An Imagestrip)

First, we need to make the outer slider element responsive. We do this by building HTML:

首先，我们需要使外部滑块元素具有响应性。 我们通过构建HTML来做到这一点：

<div id="slider">
	<figure>
		<img src="austin-fireworks.jpg" alt>
		<img src="taj-mahal.jpg" alt>
		<img src="ibiza.jpg" alt>
		<img src="ankor-wat.jpg" alt>
		<img src="austin-fireworks.jpg" alt>
	</figure>
</div>

(I’m leaving the alt attribute blank to save on space; in production, it would be filled out appropriately for accessibility and SEO purposes). Note that the same image is placed at the start and end of the strip, allowing the animation we will build to repeat in a smooth loop.

(我将alt属性留空以节省空间；在生产中，出于可访问性和SEO目的，将适当地填充它)。 请注意，同一图像放置在条带的开头和结尾，从而使我们将构建的动画可以平滑循环重复。

The window is given a width of 80% to make it responsive, and a max-width that corresponds to the natural width of an individual image (1000px, in the case of the example), as we don’t want to make any image larger than it naturally is:

窗口具有80％的width以使其具有响应能力，并且max-width对应于单个图像的自然宽度(在本示例中为1000px)，因为我们不想制作任何图像比自然的大：

div#slider {
	width: 80%;
	max-width: 1000px;
}

In our CSS, the width of the <figure> is described as a percentage multiplier of the <div> that contains it. That is, if #imagestrip contains five images, and the final <div> shows just one, the <figure> is 5x wider, or 500% the width of the container <div>:

在我们CSS中， <figure>的宽度描述为包含它的<div>的百分比乘数。 也就是说，如果#imagestrip包含五张图像，而最后的<div>仅显示一幅图像，则<figure>的宽度是5倍，或者是容器<div>宽度的500％：

div#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: left;
}

The font-size: 0 sucks all the air out of the <figure> element, removing the space around and between the images. position: relative allows the <figure> to be moved easily during the animation. text-align: left; is in place due to a weird bug in Safari 5 for Windows.

font-size: 0将所有空气从<figure>元素中吸出，从而消除了图像周围和图像之间的空间。 position: relative允许<figure>在动画过程中轻松移动。 text-align: left; 由于Safari 5(适用于Windows)中的一个奇怪的错误而已安装。

We have to evenly divide the photographs inside the imagestrip. The math is very simple: if we consider the <figure> element to be 100% wide, each image needs to take up ⅕ of the horizontal space:

我们必须将图像条中的照片平均划分。 数学非常简单：如果我们将<figure>元素的宽度设为100％，则每个图像都需要占用＆frac15;。 水平空间：

100% / 5 = 20%

100％/ 5 = 20％

Which leads to the following CSS declaration:

这导致以下CSS声明：

div#slider figure img {
	width: 20%;
	height: auto;
	float: left;
}

(Again, the float: left; is in place to address a bug in Win Safari 5).

(同样， float: left;用于解决Win Safari 5中的错误)。

Finally, we hide the overflow of the <div>:

最后，我们隐藏了<div>的溢出：

div#slider {
	width: 80%;
	max-width: 1000px;
	overflow: hidden; 
}

动画地带 (Animate The Strip)

Finally, we have to get the imagestrip moving from left to right. If the containing <div> is 100% wide, then each movement of the imagestrip to the left will be measured in increments of that distance:

最后，我们必须使图像条从左向右移动。 如果包含的<div>为100％宽，则图像带向左的每次移动都将以该距离的增量进行测量：

@keyframes slidy { 
	0%  { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; } 
	75% { left: -300%; }
	95% { left: -300%; }
	100% { left: -400%; } 
}

Each image in the slider will stay framed in the <div> for 20% of the total length of the animation, and move for 5%.

滑块中的每个图像将在<div>保持为动画总长度的20％，并移动5％。

We have to call on the animation to get things started. (Code is shown without vendor prefixes in order to save on space.)

我们必须调用动画才能开始。 (为了节省空间，显示的代码没有供应商前缀 。)

div#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 30s slidy infinite;  
}

As you can see, making a responsive slider is in many ways easier than making a fixed one.

如您所见，制作响应式滑块比制作固定式滑块要容易得多。

更新资料 (Update)

Want an easier and quicker alternative? CSSslidy is a tiny piece of JavaScript that will auto-generate CSS3 animation keyframes for any set of images, removing the need for any complex calculations or code.

需要更简单，更快捷的选择吗？ CSSslidy是一小段 JavaScript，可以为任何图像集自动生成CSS3动画关键帧，而无需任何复杂的计算或代码。

翻译自: https://thenewcode.com/627/Make-A-Responsive-CSS3-Image-Slider

css3自定义滑块