Vertical Showcase Slider with jQuery and CSS Transitions

Create a responsive vertical fullscreen slider

In this tutorial Mary Lou will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, she will slide the preview section and the section with the description in opposite directions.

 

Mary Lou will have a main container which will wrap the following elements: a header, a wrapper for the content or descriptions and a wrapper for the slides. The wrapper for the slides will contain the same amount of divisions like the content wrapper and each division will have the respective image as background image. She will also have a navigation that will contain a previous and next anchor. These anchors will also have a background image, but she’ll set it dynamically.

Comments

Be the first to write a comment

You must me logged in to write a comment.