Awesome slideshow effect with jQuery

DOWNLOAD
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.)



Labels: