🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jQuery plugin to create a responsive diagonal slider. The diagonal image slider works like an accordion that when you mouse hover it expand each image. Also you can add a title to the image to give a brief description.

Plugins Responsive Slider

Documentation

DiagonalSlider

jQuery plugin to create a Diagonal Slider.
The diagonal image slider works like an accordion that when you mouse hover it expand each image. Also you can add a title to the image to give a brief description.


Demo

Demo in jsFiddle
How to use

Your HTML:

<!DOCTYPE html> <html> <head> 	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 	<script type="text/javascript" src="js/DiagonalSlider.js"></script> </head> <body> 	<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="images/1.jpg" data-title="Image 1"/> 			</div> 			<div class="gallery_item"> 				<img src="images/2.jpg" data-title="Image 2"/> 			</div> 			<div class="gallery_item"> 				<img src="images/3.jpg" data-title="Image 3"/> 			</div> 			<div class="gallery_item"> 				<img src="images/2.jpg" data-title="Image 4"/> 			</div> 			<div class="gallery_item"> 				<img src="images/1.jpg" data-title="Image 5"/> 			</div> 		</div>		 	</div> 	<script type="text/javascript" src="js/script.js"></script> </body> </html>



Your script:

$(document).ready(function(){ 	$('.gallery_content').createDiagonalSlider(); });



Your 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); }



Result:



You May Also Like