woocommerce gallery product images widget vertical swipe

1/* VERSION 1 - Vertical Scrolling Thumbnails */
2
3.woocommerce div.product div.images .flex-control-thumbs li {
4    padding: 5px 5px 0 0;
5    -webkit-box-sizing: border-box;
6    box-sizing: border-box;
7}
8
9@media (min-width: 420px) {
10    .woocommerce-page div.product div.images {
11        display: -webkit-box;
12        display: -ms-flexbox;
13        display: flex;
14        -ms-flex-item-align: center;
15        align-self: center;
16    }
17    .woocommerce div.product div.images .flex-control-thumbs {
18        -webkit-box-ordinal-group: 0;
19        -ms-flex-order: -1;
20        order: -1;
21        display: -webkit-box;
22        display: -ms-flexbox;
23        display: flex;
24        -webkit-box-orient: vertical;
25        -webkit-box-direction: normal;
26        -ms-flex-direction: column;
27        flex-direction: column;
28        -webkit-box-flex: 1;
29        -ms-flex: 1 0 80px;
30        flex: 1 0 80px;
31        /* Adjust PX to suit width of thumbnails */
32        max-height: 425px;
33        /* Adjust Height to Image height on desktop */
34        overflow: auto;
35    }
36    .woocommerce div.product div.images .flex-control-thumbs li {
37        width: 100%;
38        padding: 0 10px 10px 0;
39    }
40}
41
42/* VERSION 2 - Horizontal Scrolling Thumbnails */
43
44.woocommerce div.product div.images .flex-control-thumbs li {
45    padding: 5px 5px 0 0;
46    -webkit-box-sizing: border-box;
47    box-sizing: border-box;
48    -webkit-box-flex: 1;
49    -ms-flex: 1 0 25%;
50    flex: 1 0 25%;
51}
52
53.woocommerce div.product div.images .flex-control-thumbs {
54    display: -webkit-box;
55    display: -ms-flexbox;
56    display: flex;
57    overflow: auto;
58}