Triple Panel Image Slider

In this tutorial Mary Lou will create a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, she will slide in the respective next image in each panel. She’ll be using CSS 3D Transforms with perspective and CSS Transitions.

The initial structure that Mary Lou will create will consist of a division with figures. Each figure will contain an image and a figcaption with the title and description for the image. Each figure will be wrapped into a division with the class fs-block and she’ll add a navigation to the whole thing. Since she wants the image slider to be responsive, she will give it a percentage width. But she’ll also define a minimal and maximum width so that it doesn’t squeeze too much or grow out of proportion. Mary Lou will add some paddings to the side because our blocks will be positioned using the CSS translate property (they will all be in the middle) and that will not affect the width of the element.