tga缩略图预览_带有缩略图预览的弹性图像幻灯片

tga缩略图预览

View demo 查看演示 Download Source 下载源

Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

今天，我们想向您展示如何使用缩略图预览创建简单的弹性幻灯片。 幻灯片将自动适应其周围的容器，我们可以使用缩略图预览器或自动播放幻灯片选项浏览幻灯片。

To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques.

为了使幻灯片显示响应，我们将结合使用JavaScript和CSS技术。

The fabulous photography used in the demo is by Bartek Lurka and it is licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported License.

该演示中使用的精彩照片是由Bartek Lurka拍摄的，并根据Attribution-NonCommercial-NoDerivs 3.0 Unported License授权。

So, let’s do it!

所以，让我们开始吧！

标记 (The Markup)

We will create two unordered lists, one for the main slider and one for the thumbnail navigation beneath the large image. The “large slider” list elements will contain the image and a title with an h2 and h3 element:

我们将创建两个无序列表，一个用于主滑块，一个用于在大图像下方的缩略图导航。 “大滑块”列表元素将包含图像以及带有h2和h3元素的标题：

<div id="ei-slider" class="ei-slider">
	<ul class="ei-slider-large">
		<li>
			<img src="images/large/1.jpg" alt="image01" />
			<div class="ei-title">
				<h2>Creative</h2>
				<h3>Geek</h3>
			</div>
		</li>
		<li>...</li>
	</ul>
	<ul class="ei-slider-thumbs">
		<li class="ei-slider-element">Current</li>
		<li>
			<a href="#">Slide 1</a>
			<img src="images/thumbs/1.jpg" alt="thumb01" />
		</li>
		<li>...</li>
	</ul>
</div>

The list for the thumbnail preview navigation will contain an absolute element (the first list element with the class ei-slider-element and the thumbnail list elements which consist of an anchor and an image (the thumbnail).

缩略图预览导航的列表将包含一个绝对元素(具有ei-slider-element类的第一个列表元素和由锚点和图像(缩略图)组成的缩略图列表元素。

Now, let’s add the style.

现在，让我们添加样式。

CSS (The CSS)

First, we will define the style for the main wrapper. We will have the slider inside of a wr