jquery 滑块_带有jQuery和CSS过渡的垂直展示柜滑块

jquery 滑块

View demo 查看演示 Download Source 下载源

In this tutorial we will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, we will slide the preview section and the section with the description in opposite directions. The idea for this kind of “opposite” transition comes from the beautiful website of the National LGBT Museum which moves the left and right side in the same manner when navigating or scrolling the page.

在本教程中，我们将为在线商店或产品组合创建一个非常简单且响应Swift的产品滑块。 想法是在全屏视图中具有不同的部分：图像或预览，导航和说明。 在项目之间导航时，我们将以相反的方向滑动预览部分和带有说明的部分。 这种“相反”过渡的想法来自国家LGBT博物馆的漂亮网站，当浏览或滚动页面时，该网站以相同的方式左右移动。

Please note: this only works as intended in browsers that support the respective CSS properties. 请注意：这仅在支持相应CSS属性的浏览器中按预期工作。

The product images and information used in the demo are by IKEA.

该演示中使用的产品图片和信息由宜家提供。

So, let’s do this!

所以，让我们做吧！

标记 (The Markup)

We will have a main container which will wrap the following elements: a header, a wrapper for the content or descriptions and a wrapper for the slides:

我们将有一个主容器，其中将包装以下元素：标头，内容或描述的包装器以及幻灯片的包装器：

<section id="ps-container" class="ps-container">

	<div class="ps-header">
		<h1>Vertical Showcase Slider</h1>
	</div><!-- /ps-header -->
	
	<div class="ps-contentwrapper">
	
		<div class="ps-content">
			<h2>Bernhard</h2>
			<span class="ps-price">£100</span>
			<p>With restful springiness in the seat; prevents static sitting and provides enhanced seating comfort. Padded seat and back for enhanced seating comfort. Soft, hardwearing and easy care leather, which ages gracefully.</p>
			<a href="http://www.ikea.com/gb/en/catalog/products/80163804/#/60203882">Buy this item</a>
		</div>
		
		<div class="ps-content">
			<!-- description item 2 -->
		</div>
		
		<div class="ps-content">
			<!-- description item 3 -->
		</div>
		
		<div class="ps-content">
			<!-- description item 4 -->
		</div>
		
		<div class="ps-content">
			<!-- description item 5 -->
		</div>
		
	</div><!-- /ps-contentwrapper -->
	
	<div class="ps-slidewrapper">
	
		<div class="ps-slides">
			<div style="background-image:url(images/1.jpg);"></div>
			<div style="background-image:url(images/2.jpg);"></div>
			<div style="background-image:url(images/3.jpg);"></div>
			<div style="background-image:url(images/4.jpg);"></div>
			<div style="background-image:url(images/5.jpg);"></div>
		</div>
		
		<nav>
			<a href="#" class="ps-prev"></a>
			<a href="#" class="ps-next"></a>
		</nav>
		
	</div><!-- /ps-slidewrapper -->
	
</section><!-- /ps-container -->

The wrapper for the slides will contain the same amount of divisions like the content wrapper and each division will have the respective image as background image. We will also have a navigation that will contain a previous and next anchor. These anchors will also have a background image, but we’ll set it dynamically.

幻灯片的包装器将包含与内容包装器相同数量的分区，并且每个分区将具有各自的图像作为背景图像。 我们还将有一个包含上一个和下一个锚点的导航。 这些锚点也将具有背景图像，但是我们将对其进行动态设置。

Let’s add some style.

让我们添加一些样式。

CSS (The CSS)

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

请注意，CSS将不包含任何供应商前缀，但是您可以在文件中找到它们。

Let’s first add a font that we’ve created with fontello.com. This font will only have one character and it’s the little shopping cart for the “Buy this item” link:

让我们首先添加我们使用fontello.com创建的字体。 该字体只有一个字符，是“购买此商品”链接的小购物车：

@font-face {
  font-family: 'icon';
  src: url("font/icon.eot");
  src: 
	url("font/icon.eot?#iefix") format('embedded-opentype'),
	url("font/icon.woff") format('woff'), 
	url("font/icon.ttf") format('truetype'), 
	url("font/icon.svg#icon") format('svg');
  font-weight: normal;
  font-style: normal;
}

Our aim is to create a layout that is 100% width and height of the screen, so our container will be positioned absolutely and we’ll set the overflow to hidden:

我们的目标是创建一个屏幕宽度和高度为100％的布局，因此我们的容器将被绝对定位，并将溢出设置为隐藏：

.ps-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-transform: uppercase;
	color: #555;
	background: #fff;
}

The width and height will be 100%. Note that we’ve set the height of the html to 100% as well (demo.css).

宽度和高度将为100％。 请注意，我们还将html的高度也设置为100％(demo.css)。

All the children of our main container will have a width of 50% and they’ll be of absolute positioning:

我们主容器的所有子容器的宽度将为50％，并且它们将处于绝对位置：

.ps-container > div {
	position: absolute;
	width: 50%;
}

There will be a couple of elements that will share the absolute positioning:

将有几个元素可以共享绝对位置：

.ps-container > div > div,
.ps-slidewrapper > nav,
.ps-slides > div {
	position: absolute;
}

The header will have a height of 150 pixel and we’ll position it in the top left corner:

标头的高度为150像素，我们将其放置在左上角：

.ps-header {
	top: 0px;
	left: 0px;
	height: 150px;
	z-index: 1001;
	background: #fff;
}

The h1 will be styled as follows:

h1的样式如下：

.ps-header h1 {
	color: #ccc;
	line-height: 150px;
	margin: 0;
	padding: 0 50px;
	font-weight: 200;
	font-size: 14px;
	letter-spacing: 10px;
}

The content wrapper will need the same top as the height of the header and we’ll set the overflow to hidden:

内容包装器的顶部与标题的高度需要相同，我们将溢出设置为隐藏：

.ps-contentwrapper {
	top: 150px;
	bottom: 0px;
	overflow: hidden;
	z-index: 1000;
}

The inner divisions will occupy all the width and height of the parent and we’ll give it a bit of padding:

内部划分将占据父对象的所有宽度和高度，我们将对其进行填充：

.ps-content {
	background: #fff;
	width: 100%;
	height: 100%;
	padding: 50px;
}

Let’s style the text elements. The headline and the paragraph will have some borders to suggest a chair:

让我们设置文本元素的样式。 标题和段落将有一些边框来建议椅子：

.ps-content h2 {
	padding: 10px 15px;
	border-right: 1px solid #f2f2f2;
	border-bottom: 1px solid #f2f2f2;
	letter-spacing: 4px;
	margin: 10px 0 30px;
	text-align: right;
	font-weight: 700;
}

.ps-content p {
	line-height: 26px;
	font-size: 12px;
	letter-spacing: 2px;
	word-spacing: 10px;
	padding: 10px 15px;
	font-weight: 400;
	text-align: justify;
	border-left: 1px solid #f2f2f2;
	border-top: 1px solid #f2f2f2;
}

The price will be floating on the left side and we’ll give it the style of a box:

价格将浮动在左侧，我们将使用盒子的样式：

.ps-content span.ps-price {
	float: left;
	margin: 10px;
	width: 140px;
	height: 140px;
	line-height: 140px;
	text-align: center;
	color: #fff;
	background: #f7cfc6;
	background: rgba(247,197,185,0.8);
	font-size: 55px;
	font-weight: 200;
}

Note that we set a HEX background color before setting a RGBA one. Older browsers that don’t know what RGBA values are will ignore the second line and apply the first color.

请注意，在设置RGBA色之前，我们先设置了十六进制背景色。 不知道RGBA值是什么的较旧的浏览器将忽略第二行并应用第一种颜色。

The link will have a thick border and we’ll make it green on hover if we are not on a touch device (we use Modernizr for that):

链接的边框会很粗，如果我们不在触摸设备上，我们会在悬停时将其设为绿色(为此我们使用Modernizr )：

.ps-content a:last-child {
	font-size: 14px;
	font-weight: 700;
	color: #555;
	letter-spacing: 4px;
	float: right;
	border: 3px solid #555;
	padding: 3px;
	text-indent: 4px;
}

.no-touch .ps-content a:last-child:hover {
	color: #b2d79d;
	border-color: #b2d79d;
}

We’ll add the little shopping cart icon by styling the pseudo-class :after:

我们将通过设置伪类：after的样式来添加小购物车图标：

.ps-content a:last-child:before {
	content: '53';
	font-family: 'icon';
	font-style: normal;
	font-weight: normal;
	speak: none;
	padding-right: 5px;
}

The container for the slides and navigation will be placed on the right side and it will have a height of 100%:

幻灯片和导航的容器将放置在右侧，高度为100％：

.ps-slidewrapper {
	right: 0px;
	top: 0px;
	height: 100%;
	overflow: hidden;
}

The wrapper for the slides will be stretched from top: 0px to bottom: 200px. This will keep its height elastic:

幻灯片的包装程序将从顶部：0像素延伸到底部：200像素。 这将使其高度保持弹性：

.ps-slides {
	top: 0px;
	bottom: 200px;
	width: 100%;
}

The inner divs, the ones that will contain the background image, will have a width and height of 100% and we’ll give them a inset box shadow that will serve as a subtle overlay over the main image preview. We don’t really know how big this division will get so we’ll give it an extremely big spread radius value:

内部div(将包含背景图像)的宽度和高度为100％，我们将为它们提供一个内嵌框阴影，该阴影将用作主图像预览上的微妙覆盖。 我们真的不知道该除法将得到多大，因此我们给它一个非常大的扩展半径值：

.ps-slides > div {
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 0 9999px rgba(179,157,250,0.1);
}

The navigation will be positioned at the bottom of the slides container and we’ll give it a fixed height of 200 pixel:

导航将位于幻灯片容器的底部，我们将其固定高度设为200像素：

.ps-slidewrapper > nav {
	width: 100%;
	height: 200px;
	bottom: 0px;
	right: 0px;
	z-index: 1000;
}

The previous and next link elements will be floating and we’ll also give them a inset box shadow to create a subtle overlay effect. They will also have a transition for non-touch devices:

上一个和下一个链接元素将处于浮动状态，我们还将为它们提供一个内嵌框阴影以创建微妙的叠加效果。 他们还将为非触摸设备过渡：

.ps-slidewrapper > nav > a {
	width: 50%;
	height: 100%;
	position: relative;
	float: left;
	outline: none;
	box-shadow: inset 0 0 0 9999px rgba(207,227,206,0.8);
}

.ps-slidewrapper > nav > a:first-child {
	box-shadow: inset 0 0 0 9999px rgba(233,217,141,0.8);
}

.no-touch .ps-slidewrapper > nav > a {
	transition: box-shadow 0.4s ease-in-out;
}

.no-touch .ps-slidewrapper > nav > a:hover {
	box-shadow: inset 0 0 0 9999px rgba(246,224,121,0.1);
}

.no-touch .ps-slidewrapper > nav > a:first-child:hover {
	box-shadow: inset 0 0 0 9999px rgba(249,15,15,0.1);
}

The navigation anchors will have a pseudo-element that will be styled to appear as an arrow. For that we will add a left and top border and rotate them accordingly:

导航锚点将具有伪元素，其样式将显示为箭头。 为此，我们将添加一个左边界和顶边界，并相应地旋转它们：

.ps-slidewrapper > nav > a:after {
	content: '';
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin: -20px 0 0 -50px;
	transform: rotate(45deg);
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
}

.ps-slidewrapper > nav > a:first-child:after {
	transform: rotate(-135deg);
	margin: -80px 0 0 -50px;
}

The main previews and the navigation links are the elements that have a background image. We’ll set that image to stretch over the height of their container:

主要预览和导航链接是具有背景图像的元素。 我们将将该图像设置为在其容器的高度上伸展：

.ps-slides > div,
.ps-slidewrapper > nav > a {
	background-color: #fff;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

The next class is used dynamically when we want to slide an element in or out:

当我们想要将元素滑入或滑出时，动态使用下一个类：

.ps-move {
	transition: top 400ms ease-out;
}

Last, but not least, we’ll define a media query for smaller devices. We only want the media query to change the style if we have JavaScript enabled since we have a completely different layout for the case JavaScript is disabled.

最后但并非最不重要的一点，我们将为较小的设备定义媒体查询。 如果启用了JavaScript，我们只希望媒体查询更改样式，因为在禁用JavaScript的情况下，布局完全不同。

We need to set the children of the main container to 100% width:

我们需要将主容器的子级设置为100％宽度：

@media screen and (max-width: 860px) {

	.js .ps-container > div {
		width: 100%;
	}

The header will be a bit smaller:

标头会小一些：

	.js .ps-header {
		height: 50px;
	}

	.js .ps-header h1 {
		line-height: 50px;
		padding: 0px 20px;
		letter-spacing: 4px;
	}

The wrapper for the preview slides will be positioned differently since we’ll place the content under it:

预览幻灯片的包装位置将有所不同，因为我们将内容放置在其下方：

	.js .ps-slides {
		bottom: 320px;
		top: 50px;
	}

The navigation will be half its original height:

导航将为其原始高度的一半：

	.js .ps-slidewrapper > nav {
		height: 100px;
	}

The content wrapper will have a height of 220px and we’ll place it right above the navigation:

内容包装器的高度为220px，我们将其放置在导航上方：

	.js .ps-contentwrapper {
		top: auto;
		height: 220px;
		bottom: 100px;
	}

Let’s change the sizes of the typographic elements:

让我们更改印刷元素的大小：

	.js .ps-content {
		padding: 10px;
	}

	.js .ps-content h2 {
		border-right: none;
		font-size: 18px;
		margin: 10px 0;
		padding-top: 0;
	}

	.js .ps-content span.ps-price {
		font-size: 18px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-weight: 700;
		margin-bottom: 0;
	}

We don’t have so much space, so let’s set a fixed height for the paragraph and make it scrollable:

我们没有太多的空间，所以让我们为段落设置一个固定的高度并使它可滚动：

	.js .ps-content p {
		line-height: 20px;
		border: none;
		padding: 5px 10px;
		height: 80px;
		overflow-y: scroll;
	}

The link will be a bit smaller and positioned to fit better into its context:

链接会更小一些，并且位置会更好地适合其上下文：

	.js .ps-content a:last-child {
		font-size: 13px;
		margin: 10px 20px 0 0;
	}
}

And that’s all the style! Now, let’s take a look at the JavaScript

这就是所有样式！ 现在，让我们看一下JavaScript

JavaScript (The JavaScript)

We will start by caching some elements and define some variables:

我们将首先缓存一些元素并定义一些变量：

var $container = $( '#ps-container' ),
	$contentwrapper = $container.children( 'div.ps-contentwrapper' ),
	// the items (description elements for the slides/products)
	$items = $contentwrapper.children( 'div.ps-content' ),
	itemsCount = $items.length,
	$slidewrapper = $container.children( 'div.ps-slidewrapper' ),
	// the slides (product images)
	$slidescontainer = $slidewrapper.find( 'div.ps-slides' ),
	$slides = $slidescontainer.children( 'div' ),
	// navigation arrows
	$navprev = $slidewrapper.find( 'nav > a.ps-prev' ),
	$navnext = $slidewrapper.find( 'nav > a.ps-next' ),
	// current index for items and slides
	current = 0,
	// checks if the transition is in progress
	isAnimating = false,
	// support for CSS transitions
	support = Modernizr.csstransitions// transition end event
	// transition end event
	// https://github.com/twitter/bootstrap/issues/2870
	transEndEventNames = {
		'WebkitTransition' : 'webkitTransitionEnd',
		'MozTransition' : 'transitionend',
		'OTransition' : 'oTransitionEnd',
		'msTransition' : 'MSTransitionEnd',
		'transition' : 'transitionend'
	};

When the init function is called, the first thing to do is to show the first item and corresponding slide/image. Also, we need to update the navigation arrows background image with the right ones, meaning that we will use the same background images as defined for the previews. Finally, the initEvents function is called.

调用init函数时，要做的第一件事是显示第一项和相应的幻灯片/图像。 另外，我们需要用正确的箭头更新导航箭头背景图像，这意味着我们将使用与预览所定义的背景图像相同的背景图像。 最后，调用initEvents函数。

init = function() {

	// show first item
	var $currentItem = $items.eq( current ),
		$currentSlide = $slides.eq( current ),
		initCSS = {
			top : 0,
			zIndex : 999
		};

	$currentItem.css( initCSS );
	$currentSlide.css( initCSS );
	
	// update nav images
	updateNavImages();

	// initialize some events
	initEvents();

},
updateNavImages = function() {

	// updates the background image for the navigation arrows
	var configPrev = ( current > 0 ) ? $slides.eq( current - 1 ).css( 'background-image' ) : $slides.eq( itemsCount - 1 ).css( 'background-image' ),
		configNext = ( current < itemsCount - 1 ) ? $slides.eq( current + 1 ).css( 'background-image' ) : $slides.eq( 0 ).css( 'background-image' );

	$navprev.css( 'background-image', configPrev );
	$navnext.css( 'background-image', configNext );

},
adjustLayout = function() {

	$container.css( 'height', $window.height() );

},

We need to initialize the click event for both navigation elements and the transitionend event for both, items/descriptions and slides.

我们需要初始化两个导航元素的click事件以及项目/描述和幻灯片的transitionend事件。

initEvents = function() {

	$navprev.on( 'click', function( event ) {

		if( !isAnimating ) {
			
			slide( 'prev' );
		
		}
		return false;

	} );

	$navnext.on( 'click', function( event ) {

		if( !isAnimating ) {
			
			slide( 'next' );
		
		}
		return false;

	} );

	// transition end event
	$items.on( transEndEventName, removeTransition );
	$slides.on( transEndEventName, removeTransition );
	
},

The main function is, of course, the slide function. The idea is to position the next item/slide to be shown above or below the current one (depending on which navigation element we click). Then we move the current item/slide out of the wrapper and slide in the new ones. We also keep the navigation elements’ background image updated.

当然，主要功能是滑动功能。 想法是将下一个要显示在当前项目上方或下方的项目/幻灯片定位(取决于我们单击的导航元素)。 然后，将当前的项目/幻灯片从包装中移出，然后滑动到新的项目/幻灯片中。 我们还保持导航元素的背景图像更新。

slide = function( dir ) {

	isAnimating = true;

	var $currentItem = $items.eq( current ),
		$currentSlide = $slides.eq( current );

	// update current value
	if( dir === 'next' ) {

		( current < itemsCount - 1 ) ? ++current : current = 0;

	}
	else if( dir === 'prev' ) {

		( current > 0 ) ? --current : current = itemsCount - 1;

	}
		// new item that will be shown
	var $newItem = $items.eq( current ),
		// new slide that will be shown
		$newSlide = $slides.eq( current );

	// position the new item up or down the viewport depending on the direction
	$newItem.css( {
		top : ( dir === 'next' ) ? '-100%' : '100%',
		zIndex : 999
	} );
	
	$newSlide.css( {
		top : ( dir === 'next' ) ? '100%' : '-100%',
		zIndex : 999
	} );

	setTimeout( function() {

		// move the current item and slide to the top or bottom depending on the direction 
		$currentItem.addClass( 'ps-move' ).css( {
			top : ( dir === 'next' ) ? '100%' : '-100%',
			zIndex : 1
		} );

		$currentSlide.addClass( 'ps-move' ).css( {
			top : ( dir === 'next' ) ? '-100%' : '100%',
			zIndex : 1
		} );

		// move the new ones to the main viewport
		$newItem.addClass( 'ps-move' ).css( 'top', 0 );
		$newSlide.addClass( 'ps-move' ).css( 'top', 0 );

		// if no CSS transitions set the isAnimating flag to false
		if( !support ) {

			isAnimating = false;

		}

	}, 0 );

	// update nav images
	updateNavImages();

};

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

就是这样！ 希望您喜欢本教程并从中获得启发！

翻译自: https://tympanus.net/codrops/2012/10/01/vertical-showcase-slider-with-jquery-and-css-transitions/

jquery 滑块