Download Split Vertical Product Showcase Plugin With jQuery

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.

File Size:	224 KB
Views Total:	5117
Last Update:	3 years ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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>

4
<script src="https://code.jquery.com/jquery-3.3.1.min.js"

5
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"

6
        crossorigin="anonymous">

7
</script>

8
<script  src="js/slider.js"></script>

2. Add your products to the Vertical Product Showcase.

01
<section id="ps-container" class="ps-container">

02
 
03
  <div class="ps-header">

04
      <h1>Vertical <a href="https://www.jqueryscript.net/slider/">Slider</a> Showcase Example</h1>

05
  </div>

06
 
07
  <div class="ps-contentwrapper">

08
 
09
    <div class="ps-content">

10
        <h2>Product 1</h2>

11
        <span class="ps-price">$100</span>

12
        <p>Description 1</p>

13
        <a href="#">Buy this item</a>

14
    </div>

15
 
16
    <div class="ps-content">

17
        <h2>Product 2</h2>

18
        <span class="ps-price">$200</span>

19
        <p>Description 2</p>

20
        <a href="#">Buy this item</a>

21
    </div>

22
 
23
    <div class="ps-content">

24
        <h2>Product 3</h2>

25
        <span class="ps-price">$300</span>

26
        <p>Description 3</p>

27
        <a href="#">Buy this item</a>

28
    </div>

29
 
30
    ...

31
 
32
  </div>

33
 
34
  <div class="ps-slidewrapper">

35
 
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>

40
        ...

41
    </div>

42
 
43
    <nav>

44
        <a href="#" class="ps-prev"></a>

45
        <a href="#" class="ps-next"></a>

46
    </nav>

47
 
48
  </div>

49
 
50
</section>

3. Initialize the plugin to activate the Vertical Product Showcase.

1
$(function () {

2
 
3
  Slider.init();

4
 
5
});

This awesome jQuery plugin is developed by maskend. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

See it in action:

How to use it:

Share this:

Related posts: