This time I will share jQuery Plugin and tutorial about Split Vertical Product Showcase Plugin With jQuery, hope it will help you in programming stack.
A fancy responsive fullscreen vertical page slider plugin for jQuery that can be used to showcase your products (images, descriptions, action buttons) with a split panel transition.
Works on modern browsers which support CSS3 transitions and media queries.
See it in action:
How to use it:
1. Load the necessary JavaScript and CSS files in the document.
1 |
< link rel = "stylesheet" href = "css/style.css" > |
2 |
< noscript >< link rel = "stylesheet" href = "css/noscript.css" /></ noscript > |
3 |
< script type = "text/javascript" src = "js/modernizr.custom.js" ></ script > |
5 |
integrity = "sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
6 |
crossorigin = "anonymous" > |
8 |
< script src = "js/slider.js" ></ script > |
2. Add your products to the Vertical Product Showcase.
01 |
< section id = "ps-container" class = "ps-container" > |
03 |
< div class = "ps-header" > |
07 |
< div class = "ps-contentwrapper" > |
09 |
< div class = "ps-content" > |
11 |
< span class = "ps-price" >$100</ span > |
13 |
< a href = "#" >Buy this item</ a > |
16 |
< div class = "ps-content" > |
18 |
< span class = "ps-price" >$200</ span > |
20 |
< a href = "#" >Buy this item</ a > |
23 |
< div class = "ps-content" > |
25 |
< span class = "ps-price" >$300</ span > |
27 |
< a href = "#" >Buy this item</ a > |
34 |
< div class = "ps-slidewrapper" > |
36 |
< div class = "ps-slides" > |
37 |
< div style = "background-image:url(./images/1.jpg);" ></ div > |
38 |
< div style = "background-image:url(./images/2.jpg);" ></ div > |
39 |
< div style = "background-image:url(./images/3.jpg);" ></ div > |
44 |
< a href = "#" class = "ps-prev" ></ a > |
45 |
< a href = "#" class = "ps-next" ></ a > |
3. Initialize the plugin to activate the Vertical Product Showcase.
This awesome jQuery plugin is developed by maskend. For more Advanced Usages, please check the demo page or visit the official website.