Diagonal Slider

jQuery plugin to create a Responsive Diagonal Slider

by Vitaly Volovich

HTML

<script src="http://static.innvenio.com/diagonalslider/js/DiagonalSlider.js"></script>
<div class="content_slider">
		<div class="content_title" data-default-text="<b>Diagonal Slider</b><br/>by @innvenio">
			<div class="text">
				<b>Diagonal Slider</b><br/>by @innvenio
			</div>
		</div>
		<div class="gallery_content">
			<div class="gallery_item">
				<img src="http://static.innvenio.com/diagonalslider/images/1.jpg" data-title="Image 1"/>
			</div>
			<div class="gallery_item">
				<img src="http://static.innvenio.com/diagonalslider/images/2.jpg" data-title="Image 2"/>
			</div>
			<div class="gallery_item">
				<img src="http://static.innvenio.com/diagonalslider/images/3.jpg" data-title="Image 3"/>
			</div>
			<div class="gallery_item">
				<img src="http://static.innvenio.com/diagonalslider/images/2.jpg" data-title="Image 4"/>
			</div>
			<div class="gallery_item">
				<img src="http://static.innvenio.com/diagonalslider/images/1.jpg" data-title="Image 5"/>
			</div>
		</div>		
	</div>

CSS

img
{
	display: block;
	margin: 0px;
}

.content_title
{
	position: absolute;
	padding: 50px 40px 50px 80px;
	background-color: #FFF;
	z-index: 100;
	font-size: 22px;
	margin-left: -60px;
	-webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
	-moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
	-ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
	transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.content_title .text
{
	-webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
	-moz-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
	-ms-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
	transform: translate3d(0, 0, 0) skew(20deg, 0deg);
}

.content_slider
{
	width: 100%;
	overflow: hidden;
}

.gallery_content
{
	overflow: hidden;
	margin-left: -170px;
	
}

.gallery_item
{
	float: left;
	overflow: hidden;
	vertical-align: top;
	margin-left: -2px;
	-webkit-transition: width 500ms;
	-moz-transition: width 500ms;
	-o-transition: width 500ms;
	transition: width 500ms;
	-webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
	-moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
	-ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
	transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.gallery_item img
{
	position: relative;
	-webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
	-moz-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
	-ms-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
	transform: translate3d(0, 0, 0) skew(20deg, 0deg);
}

JavaScript

$(document).ready(function(){
	$('.gallery_content').createDiagonalSlider();
    
    //Source Code
    //github.com/Innvenio/Diagonal-Slider
});