3D Flow - Plugin for Swiper

3D Flow is the ultra small (1Kb minified and gzipped) and free plugin for iDangero.us Swiper that turns your great swiper slider (or app) into amazing realistic 3D gallery with dynamic shadows. It was inspired by iOS App Store homepage 3D slider.

It works in all browser that support CSS3 3D Transforms: WebKit browsers (Chrome, Safari, iOS Safari, native Android & BlackBerry browsers, etc.), FireFox 12+ and Internet Explorer 10 (including Windows Phone 8). In browsers that do not support CSS3 3D transforms it will work and look like a usual Swiper.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: idangero.us

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
<link rel="stylesheet" href="path_to_css/idangerous.swiper.3dflow.css">
<script src="path_to_js/idangerous.swiper-2.x.min.js"></script>
<script src="path_to_js/idangerous.swiper.3dflow-2.x.js"></script>

2. HTML

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="background-image:url(img/2.jpg)">
			<a href="http://www.idangero.us/sliders/moover/" target="_blank"></a>
		</div>
		<div class="swiper-slide" style="background-image:url(img/1.jpg)">
			<a href="http://www.idangero.us/" target="_blank"></a>
		</div>
		<div class="swiper-slide" style="background-image:url(img/4.jpg)">
			<a href="http://www.idangero.us/sliders/" target="_blank"></a>
		</div>
		<div class="swiper-slide" style="background-image:url(img/7.jpg)">
			<a href="http://www.idangero.us/cs/" target="_blank"></a>
		</div>
		<div class="swiper-slide" style="background-image:url(img/6.jpg)">
			<a href="http://www.idangero.us/sliders/s6/" target="_blank"></a>
		</div>
	</div>
</div>

3. JAVASCRIPT

var mySwiper = new Swiper('.swiper-container',{
	slidesPerView:3,
	loop:true,
	//Enable 3D Flow
	tdFlow: {
		rotate : 30,
		stretch :10,
		depth: 150,
		modifier : 1,
		shadows:true
	}
});

4. OPTIONS