You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.

The Markup

We will have a main container which is a section with the class jms-slideshow. Inside, we’ll have sevaral divisions with the class step. These will be our single slides. Each step or slide will get a data-color class for it’s background color and some data attributes of jmpress.js. You can find all (inline) options here: jmpress.js Documentation – Options. We’ll use some attributes in order to define the position and rotation of the slides in 3D space:

<section id="jms-slideshow" class="jms-slideshow">

	<div class="step" data-color="color-1">
		<div class="jms-content">
			<h3>Some headline</h3>
			<p>Some text</p>
			<a class="jms-link" href="#">Read more</a>
		</div>
		<img src="images/1.png" />
	</div>

	<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
		<!-- ... -->
	</div>

	<!-- ... -->

</section>

Let’s take care of the style.

The CSS

Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values:

.jms-slideshow {
	position: relative;
	width: 80%;
	max-width: 1400px;
	min-width: 640px;
	margin: 20px auto;
	height: 460px;
}

The next wrapper is dynamically added, and this will be the visible slideshow wrapper:

.jms-wrapper {
	width: auto;
	min-width: 600px;
	height: 440px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border: 10px solid #fff;
	border: 10px solid rgba(255, 255, 255, 0.9);
	outline: none;
	transition: background-color 1s linear;
}

The background color classes will be applied to the previous wrapper. The class is defined in the data atrribute data-color in each step. This gives us the possibility to add a background color for each slide and change it with a transition. (The duration of the transition will be re-defined in the JavaScript.)

Read more:http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/