zz-shopify-components 0.29.1-beta.1 → 0.29.1-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blocks/zz-normal-swiper.liquid +370 -174
- package/blocks/zz-responsive-width-image.liquid +20 -1
- package/blocks/zz-responsive-width-video-compare.liquid +353 -0
- package/blocks/zz-scroll-animate-bg-text.liquid +12 -2
- package/package.json +1 -1
- package/sections/zz-navigation-tab-v3.liquid +28 -15
- package/snippets/zz-prev-next-btn.liquid +49 -38
|
@@ -1,200 +1,383 @@
|
|
|
1
1
|
{% assign block_size = block.blocks.size %}
|
|
2
2
|
|
|
3
3
|
<style>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
#shopify-block-{{block.id}} .zz-normal-swiper {
|
|
14
|
-
box-sizing: border-box;
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
position: relative;
|
|
17
|
-
letter-spacing: 0;
|
|
18
|
-
padding-bottom: 48px;
|
|
19
|
-
}
|
|
20
|
-
{% if block.settings.right_to_edge == true %}
|
|
21
|
-
@media (min-width: 1280px) {
|
|
22
|
-
#shopify-block-{{block.id}} .zz-normal-swiper {
|
|
23
|
-
padding: 0 calc((100% - {{ block.settings.pc_xl_width }}px) / 2);
|
|
4
|
+
#shopify-block-{{block.id}} {
|
|
5
|
+
background: {{ block.settings.bg_color }};
|
|
6
|
+
width: 100%;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
position: relative;
|
|
10
|
+
--zz-autoplay-delay: {{ block.settings.autoplay_delay | default: 4000 }}ms;
|
|
11
|
+
--zz-pagination-offset-y: {{ block.settings.pagination_offset_y | default: 0 }}px;
|
|
24
12
|
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media (min-width: 1024px) and (max-width: 1279px) {
|
|
28
13
|
#shopify-block-{{block.id}} .zz-normal-swiper {
|
|
29
|
-
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
position: relative;
|
|
17
|
+
letter-spacing: 0;
|
|
18
|
+
padding-bottom: 48px;
|
|
30
19
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
20
|
+
{% if block.settings.right_to_edge == true %}
|
|
21
|
+
@media (min-width: 1280px) {
|
|
22
|
+
#shopify-block-{{block.id}} .zz-normal-swiper {
|
|
23
|
+
padding: 0 calc((100% - {{ block.settings.pc_xl_width }}px) / 2);
|
|
24
|
+
}
|
|
35
25
|
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
{% endif %}
|
|
39
|
-
#shopify-block-{{block.id}} {
|
|
40
|
-
width: 100%;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
#shopify-block-{{block.id}} .swiper-button-next:after,
|
|
44
|
-
#shopify-block-{{block.id}} .swiper-button-prev:after {
|
|
45
|
-
display: none;
|
|
46
|
-
}
|
|
47
26
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
border-radius: var(--seg-height);
|
|
66
|
-
background: var(--seg-bg);
|
|
67
|
-
opacity: 1;
|
|
68
|
-
transition: width .3s ease, background-color .3s ease;
|
|
69
|
-
}
|
|
70
|
-
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet-active {
|
|
71
|
-
width: var(--seg-active-width);
|
|
72
|
-
position: relative;
|
|
73
|
-
overflow: hidden;
|
|
74
|
-
}
|
|
75
|
-
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet-active::after {
|
|
76
|
-
content: '';
|
|
77
|
-
position: absolute;
|
|
78
|
-
left: 0; top: 0; bottom: 0;
|
|
79
|
-
width: 0%;
|
|
80
|
-
background: #000;
|
|
81
|
-
{% if block.settings.autoplay %}
|
|
82
|
-
animation: zz-pb-{{block.id}} var(--zz-autoplay-delay) linear forwards;
|
|
27
|
+
@media (min-width: 1024px) and (max-width: 1279px) {
|
|
28
|
+
#shopify-block-{{block.id}} .zz-normal-swiper {
|
|
29
|
+
padding: 0 calc((100% - {{ block.settings.pc_lg_width }}vw) / 2);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
@media (max-width: 1024px) {
|
|
33
|
+
#shopify-block-{{block.id}} .zz-normal-swiper {
|
|
34
|
+
padding-left: 20px;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@media (max-width: 1024px) {
|
|
38
|
+
.zz-fraction-inline-controls .swiper-button-next,
|
|
39
|
+
.zz-fraction-inline-controls .swiper-button-prev {
|
|
40
|
+
width: 36px !important;
|
|
41
|
+
height: 36px !important;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
83
44
|
{% endif %}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
|
93
|
-
height: 4px;
|
|
94
|
-
}
|
|
95
|
-
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar {
|
|
96
|
-
background: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.15 }};
|
|
97
|
-
}
|
|
98
|
-
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
|
99
|
-
background: {{ block.settings.mb_pagination_color }};
|
|
100
|
-
}
|
|
101
|
-
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet {
|
|
102
|
-
margin: 0 4px;
|
|
103
|
-
width: 6px;
|
|
104
|
-
height: 6px;
|
|
105
|
-
border-radius: 6px;
|
|
106
|
-
background: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
|
|
107
|
-
opacity: 1;
|
|
108
|
-
transition: 0.3s;
|
|
109
|
-
}
|
|
110
|
-
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet-active {
|
|
111
|
-
background: {{ block.settings.mb_pagination_color }};
|
|
112
|
-
}
|
|
45
|
+
#shopify-block-{{block.id}} {
|
|
46
|
+
width: 100%;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
#shopify-block-{{block.id}} .swiper-button-next:after,
|
|
50
|
+
#shopify-block-{{block.id}} .swiper-button-prev:after {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
113
53
|
|
|
114
|
-
@media screen and (min-width: 1024px) {
|
|
115
54
|
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullets {
|
|
116
|
-
bottom: calc(
|
|
55
|
+
bottom: calc(16px + var(--zz-pagination-offset-y));
|
|
117
56
|
}
|
|
118
57
|
{% if block.settings.pagination_type == 'segments' %}
|
|
119
|
-
/* Segments pagination (
|
|
58
|
+
/* Segments pagination (mobile defaults) */
|
|
120
59
|
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments {
|
|
121
|
-
bottom: calc(
|
|
122
|
-
--seg-width:
|
|
123
|
-
--seg-active-width:
|
|
124
|
-
--seg-height:
|
|
125
|
-
--seg-gap:
|
|
126
|
-
--seg-bg: {{ block.settings.
|
|
60
|
+
bottom: calc(16px + var(--zz-pagination-offset-y));
|
|
61
|
+
--seg-width: 24px;
|
|
62
|
+
--seg-active-width: 60px;
|
|
63
|
+
--seg-height: 4px;
|
|
64
|
+
--seg-gap: 2px;
|
|
65
|
+
--seg-bg: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
|
|
66
|
+
}
|
|
67
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet {
|
|
68
|
+
margin: 0 var(--seg-gap);
|
|
69
|
+
width: var(--seg-width);
|
|
70
|
+
height: var(--seg-height);
|
|
71
|
+
border-radius: var(--seg-height);
|
|
72
|
+
background: var(--seg-bg);
|
|
73
|
+
opacity: 1;
|
|
74
|
+
transition: width .3s ease, background-color .3s ease;
|
|
75
|
+
}
|
|
76
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet-active {
|
|
77
|
+
width: var(--seg-active-width);
|
|
78
|
+
position: relative;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
}
|
|
81
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet-active::after {
|
|
82
|
+
content: '';
|
|
83
|
+
position: absolute;
|
|
84
|
+
left: 0; top: 0; bottom: 0;
|
|
85
|
+
width: 0%;
|
|
86
|
+
background: #000;
|
|
87
|
+
{% if block.settings.autoplay %}
|
|
88
|
+
animation: zz-pb-{{block.id}} var(--zz-autoplay-delay) linear forwards;
|
|
89
|
+
{% endif %}
|
|
90
|
+
}
|
|
91
|
+
@keyframes zz-pb-{{block.id}} {
|
|
92
|
+
from { width: 0%; }
|
|
93
|
+
to { width: 100%; }
|
|
127
94
|
}
|
|
128
95
|
{% endif %}
|
|
96
|
+
/* Ensure progressbar pagination is visible and colored */
|
|
97
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar,
|
|
98
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
|
99
|
+
height: 4px;
|
|
100
|
+
}
|
|
129
101
|
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar {
|
|
130
|
-
background: {{ block.settings.
|
|
102
|
+
background: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.15 }};
|
|
131
103
|
}
|
|
132
104
|
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
|
133
|
-
background: {{ block.settings.
|
|
105
|
+
background: {{ block.settings.mb_pagination_color }};
|
|
134
106
|
}
|
|
135
107
|
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet {
|
|
136
|
-
margin: 0
|
|
137
|
-
width:
|
|
138
|
-
height:
|
|
139
|
-
border-radius:
|
|
140
|
-
background: {{ block.settings.
|
|
108
|
+
margin: 0 4px;
|
|
109
|
+
width: 6px;
|
|
110
|
+
height: 6px;
|
|
111
|
+
border-radius: 6px;
|
|
112
|
+
background: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
|
|
113
|
+
opacity: 1;
|
|
114
|
+
transition: 0.3s;
|
|
141
115
|
}
|
|
142
116
|
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet-active {
|
|
143
|
-
background: {{ block.settings.
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
#shopify-block-{{block.id}}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}
|
|
152
|
-
#shopify-block-{{block.id}} .
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
117
|
+
background: {{ block.settings.mb_pagination_color }};
|
|
118
|
+
}
|
|
119
|
+
{% if block.settings.scale_active_slide %}
|
|
120
|
+
#shopify-block-{{block.id}} {
|
|
121
|
+
overflow: visible;
|
|
122
|
+
}
|
|
123
|
+
#shopify-block-{{block.id}} .zz-normal-swiper {
|
|
124
|
+
overflow: visible;
|
|
125
|
+
}
|
|
126
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-wrapper {
|
|
127
|
+
overflow: visible;
|
|
128
|
+
}
|
|
129
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide {
|
|
130
|
+
padding: calc({{ block.settings.space_between | default: 8 }}px / 2 + 6px);
|
|
131
|
+
box-sizing: border-box;
|
|
132
|
+
}
|
|
133
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .zz-slide-scale-target {
|
|
134
|
+
height: 100%;
|
|
135
|
+
transition: transform 0.35s ease;
|
|
136
|
+
will-change: transform;
|
|
137
|
+
transform-origin: center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@media screen and (min-width: 1024px) {
|
|
141
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide.swiper-slide-active .zz-slide-scale-target,
|
|
142
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide.swiper-slide-duplicate-active .zz-slide-scale-target {
|
|
143
|
+
transform: scale(1.1);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
159
146
|
|
|
160
|
-
@media screen and (max-width: 1023px) {
|
|
161
|
-
{% if block.settings.show_navigation_mobile == false %}
|
|
162
|
-
#shopify-block-{{block.id}} .swiper-button-next,
|
|
163
|
-
#shopify-block-{{block.id}} .swiper-button-prev { display: none; }
|
|
164
147
|
{% endif %}
|
|
165
|
-
|
|
148
|
+
{% if block.settings.pagination_type == 'fraction' %}
|
|
149
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls {
|
|
150
|
+
display: flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
justify-content: center;
|
|
153
|
+
gap: 20px;
|
|
154
|
+
padding-top: {{ block.settings.pagination_offset_y | default: 16 }}px;
|
|
155
|
+
--zz-fraction-color-current: {{ block.settings.mb_pagination_color }};
|
|
156
|
+
--zz-fraction-color-total: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.45 }};
|
|
157
|
+
--zz-fraction-font-size: 14px;
|
|
158
|
+
--zz-fraction-slash-spacing: 4px;
|
|
159
|
+
}
|
|
160
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination {
|
|
161
|
+
position: static;
|
|
162
|
+
bottom: auto;
|
|
163
|
+
transform: none;
|
|
164
|
+
margin: 0;
|
|
165
|
+
}
|
|
166
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction {
|
|
167
|
+
display: inline-flex;
|
|
168
|
+
align-items: baseline;
|
|
169
|
+
width: auto;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
font-size: 0;
|
|
172
|
+
letter-spacing: 0;
|
|
173
|
+
white-space: nowrap;
|
|
174
|
+
}
|
|
175
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction .swiper-pagination-current,
|
|
176
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction .swiper-pagination-total {
|
|
177
|
+
font-size: var(--zz-fraction-font-size);
|
|
178
|
+
width: 20px;
|
|
179
|
+
line-height: 1.1;
|
|
180
|
+
}
|
|
181
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction .swiper-pagination-current {
|
|
182
|
+
text-align: right;
|
|
183
|
+
display: inline-block;
|
|
184
|
+
width: 40px;
|
|
185
|
+
}
|
|
186
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction .swiper-pagination-current {
|
|
187
|
+
font-weight: 600;
|
|
188
|
+
color: var(--zz-fraction-color-current);
|
|
189
|
+
}
|
|
190
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction .swiper-pagination-current::after {
|
|
191
|
+
content: '/';
|
|
192
|
+
display: inline-block;
|
|
193
|
+
margin: 0 var(--zz-fraction-slash-spacing);
|
|
194
|
+
font-weight: 500;
|
|
195
|
+
color: var(--zz-fraction-color-total);
|
|
196
|
+
}
|
|
197
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction .swiper-pagination-total {
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
color: var(--zz-fraction-color-total);
|
|
200
|
+
}
|
|
201
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-button-next,
|
|
202
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-button-prev {
|
|
203
|
+
position: static;
|
|
204
|
+
top: auto;
|
|
205
|
+
left: auto;
|
|
206
|
+
right: auto;
|
|
207
|
+
transform: none;
|
|
208
|
+
margin: 0;
|
|
209
|
+
}
|
|
210
|
+
{% endif %}
|
|
211
|
+
|
|
212
|
+
@media screen and (min-width: 1024px) {
|
|
213
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullets {
|
|
214
|
+
bottom: calc(24px + var(--zz-pagination-offset-y));
|
|
215
|
+
}
|
|
216
|
+
{% if block.settings.pagination_type == 'segments' %}
|
|
217
|
+
/* Segments pagination (desktop overrides) */
|
|
218
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments {
|
|
219
|
+
bottom: calc(24px + var(--zz-pagination-offset-y));
|
|
220
|
+
--seg-width: 48px;
|
|
221
|
+
--seg-active-width: 120px;
|
|
222
|
+
--seg-height: 6px;
|
|
223
|
+
--seg-gap: 4px;
|
|
224
|
+
--seg-bg: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
|
|
225
|
+
}
|
|
226
|
+
{% endif %}
|
|
227
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar {
|
|
228
|
+
background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.15 }};
|
|
229
|
+
}
|
|
230
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
|
231
|
+
background: {{ block.settings.pagination_color }};
|
|
232
|
+
}
|
|
233
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet {
|
|
234
|
+
margin: 0 6px;
|
|
235
|
+
width: 10px;
|
|
236
|
+
height: 10px;
|
|
237
|
+
border-radius: 10px;
|
|
238
|
+
background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
|
|
239
|
+
}
|
|
240
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet-active {
|
|
241
|
+
background: {{ block.settings.pagination_color }};
|
|
242
|
+
}
|
|
243
|
+
#shopify-block-{{block.id}} .swiper-button-next,
|
|
244
|
+
#shopify-block-{{block.id}} .swiper-button-prev {
|
|
245
|
+
width: 48px;
|
|
246
|
+
height: 48px;
|
|
247
|
+
top: 50%;
|
|
248
|
+
transform: translateY(-50%);
|
|
249
|
+
}
|
|
250
|
+
#shopify-block-{{block.id}} .swiper-button-prev { left: 16px; }
|
|
251
|
+
#shopify-block-{{block.id}} .swiper-button-next { right: 16px; }
|
|
252
|
+
{% if block.settings.pagination_type == 'fraction' %}
|
|
253
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls {
|
|
254
|
+
--zz-fraction-color-current: {{ block.settings.pagination_color }};
|
|
255
|
+
--zz-fraction-color-total: {{ block.settings.pagination_color | color_modify: 'alpha', 0.45 }};
|
|
256
|
+
--zz-fraction-font-size: 14px;
|
|
257
|
+
--zz-fraction-slash-spacing: 8px;
|
|
258
|
+
}
|
|
259
|
+
{% endif %}
|
|
260
|
+
}
|
|
261
|
+
/* Reset segments progress animation when slide changes */
|
|
262
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .zz-pagination-segments .swiper-pagination-bullet::after {
|
|
263
|
+
width: 0%;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
{% if block.settings.slides_per_view_pc == 0 %}
|
|
267
|
+
@media screen and (min-width: 1024px) {
|
|
268
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide {
|
|
269
|
+
width: auto;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
{% endif %}
|
|
273
|
+
{% if block.settings.slides_per_view_mb == 0 %}
|
|
274
|
+
@media screen and (max-width: 1023px) {
|
|
275
|
+
#shopify-block-{{block.id}} .zz-normal-swiper .swiper-slide {
|
|
276
|
+
width: auto;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
{% endif %}
|
|
280
|
+
@media screen and (max-width: 1023px) {
|
|
281
|
+
#shopify-block-{{block.id}} .zz-fraction-inline-controls .swiper-pagination-fraction .swiper-pagination-current {
|
|
282
|
+
width: 30px;
|
|
283
|
+
}
|
|
284
|
+
{% if block.settings.show_navigation_mobile == false %}
|
|
285
|
+
#shopify-block-{{block.id}} .swiper-button-next,
|
|
286
|
+
#shopify-block-{{block.id}} .swiper-button-prev { display: none; }
|
|
287
|
+
{% endif %}
|
|
288
|
+
}
|
|
166
289
|
</style>
|
|
167
290
|
|
|
168
291
|
<div
|
|
169
292
|
class='zz-normal-swiper swiper zz-normal-swiper-{{ block.id }}'
|
|
170
293
|
>
|
|
171
294
|
<div class='zz-swiper-wrapper swiper-wrapper tw-invisible'>
|
|
172
|
-
{% for
|
|
295
|
+
{% for slide_block in block.blocks %}
|
|
173
296
|
<div class='swiper-slide'>
|
|
174
|
-
{%
|
|
297
|
+
{% if block.settings.scale_active_slide %}
|
|
298
|
+
<div class='zz-slide-scale-target'>
|
|
299
|
+
{% render slide_block %}
|
|
300
|
+
</div>
|
|
301
|
+
{% else %}
|
|
302
|
+
{% render slide_block %}
|
|
303
|
+
{% endif %}
|
|
175
304
|
</div>
|
|
176
305
|
{% endfor %}
|
|
177
306
|
</div>
|
|
178
307
|
|
|
179
|
-
{% if block.settings.
|
|
180
|
-
<div class='
|
|
181
|
-
{%
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
308
|
+
{% if block.settings.pagination_type == 'fraction' %}
|
|
309
|
+
<div class='zz-fraction-inline-controls'>
|
|
310
|
+
{% if block.settings.show_navigation %}
|
|
311
|
+
<div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
|
|
312
|
+
{% if block.settings.navigation_style == 'normal' %}
|
|
313
|
+
{% render 'zz-prev-next-btn',
|
|
314
|
+
type: 'prev',
|
|
315
|
+
color_type: block.settings.prev_next_type
|
|
316
|
+
%}
|
|
317
|
+
{% else %}
|
|
318
|
+
{% render 'zz-prev-next-blur-icon',
|
|
319
|
+
type: 'prev',
|
|
320
|
+
color_type: block.settings.prev_next_type
|
|
321
|
+
%}
|
|
322
|
+
{% endif %}
|
|
323
|
+
</div>
|
|
324
|
+
{% endif %}
|
|
325
|
+
|
|
326
|
+
{% if block.settings.pagination_type != 'none' %}
|
|
327
|
+
<div class='swiper-pagination'></div>
|
|
328
|
+
{% endif %}
|
|
329
|
+
|
|
330
|
+
{% if block.settings.show_navigation %}
|
|
331
|
+
<div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
|
|
332
|
+
{% if block.settings.navigation_style == 'normal' %}
|
|
333
|
+
{% render 'zz-prev-next-btn',
|
|
334
|
+
type: 'next',
|
|
335
|
+
color_type: block.settings.prev_next_type
|
|
336
|
+
%}
|
|
337
|
+
{% else %}
|
|
338
|
+
{% render 'zz-prev-next-blur-icon',
|
|
339
|
+
type: 'next',
|
|
340
|
+
color_type: block.settings.prev_next_type
|
|
341
|
+
%}
|
|
342
|
+
{% endif %}
|
|
343
|
+
</div>
|
|
344
|
+
{% endif %}
|
|
191
345
|
</div>
|
|
192
|
-
{%
|
|
346
|
+
{% else %}
|
|
347
|
+
{% if block.settings.show_navigation %}
|
|
348
|
+
<div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
|
|
349
|
+
{% if block.settings.navigation_style == 'normal' %}
|
|
350
|
+
{% render 'zz-prev-next-btn',
|
|
351
|
+
type: 'prev',
|
|
352
|
+
color_type: block.settings.prev_next_type
|
|
353
|
+
%}
|
|
354
|
+
{% else %}
|
|
355
|
+
{% render 'zz-prev-next-blur-icon',
|
|
356
|
+
type: 'prev',
|
|
357
|
+
color_type: block.settings.prev_next_type
|
|
358
|
+
%}
|
|
359
|
+
{% endif %}
|
|
360
|
+
</div>
|
|
361
|
+
<div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
|
|
362
|
+
{% if block.settings.navigation_style == 'normal' %}
|
|
363
|
+
{% render 'zz-prev-next-btn',
|
|
364
|
+
type: 'next',
|
|
365
|
+
color_type: block.settings.prev_next_type
|
|
366
|
+
%}
|
|
367
|
+
{% else %}
|
|
368
|
+
{% render 'zz-prev-next-blur-icon',
|
|
369
|
+
type: 'next',
|
|
370
|
+
color_type: block.settings.prev_next_type
|
|
371
|
+
%}
|
|
372
|
+
{% endif %}
|
|
373
|
+
</div>
|
|
374
|
+
{% endif %}
|
|
193
375
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
376
|
+
{% if block.settings.pagination_type != 'none' %}
|
|
377
|
+
<div
|
|
378
|
+
class='swiper-pagination {% if block.settings.pagination_type == "segments" %} zz-pagination-segments {% endif %}'
|
|
379
|
+
></div>
|
|
380
|
+
{% endif %}
|
|
198
381
|
{% endif %}
|
|
199
382
|
</div>
|
|
200
383
|
|
|
@@ -210,16 +393,13 @@
|
|
|
210
393
|
let instance = null;
|
|
211
394
|
let initialized = false;
|
|
212
395
|
|
|
213
|
-
const isDesktop = window.innerWidth > 1023;
|
|
214
|
-
const spaceBetween = isDesktop ? {{ block.settings.space_between | default: 8 }} : {{ block.settings.space_between_mb | default: 8 }};
|
|
215
|
-
|
|
216
396
|
const options = {
|
|
217
397
|
loop: {{ block.settings.loop | json }},
|
|
218
398
|
speed: {{ block.settings.speed | default: 500 }},
|
|
219
399
|
autoHeight: {{ block.settings.auto_height | json }},
|
|
220
400
|
centeredSlides: {{ block.settings.centered_slides | json }},
|
|
221
401
|
watchOverflow: true,
|
|
222
|
-
spaceBetween:
|
|
402
|
+
spaceBetween: {{ block.settings.space_between | default: 8 }},
|
|
223
403
|
{% if block.settings.pagination_type != 'none' %}
|
|
224
404
|
pagination: {
|
|
225
405
|
el: '#shopify-block-{{block.id}} .swiper-pagination',
|
|
@@ -243,11 +423,19 @@
|
|
|
243
423
|
initialSlide: {{ block.settings.pre_show_index | default: 0 }},
|
|
244
424
|
breakpoints: {
|
|
245
425
|
0: {
|
|
426
|
+
{% if block.settings.slides_per_view_mb == 0 %}
|
|
427
|
+
slidesPerView: 'auto',
|
|
428
|
+
{% else %}
|
|
246
429
|
slidesPerView: {{ block.settings.slides_per_view_mb | default: 1 }},
|
|
430
|
+
{% endif %}
|
|
247
431
|
slidesPerGroup: {{ block.settings.slides_per_group_mb | default: 1 }},
|
|
248
432
|
},
|
|
249
433
|
1024: {
|
|
434
|
+
{% if block.settings.slides_per_view_pc == 0 %}
|
|
435
|
+
slidesPerView: 'auto',
|
|
436
|
+
{% else %}
|
|
250
437
|
slidesPerView: {{ block.settings.slides_per_view_pc | default: 3 }},
|
|
438
|
+
{% endif %}
|
|
251
439
|
slidesPerGroup: {{ block.settings.slides_per_group_pc | default: 1 }},
|
|
252
440
|
}
|
|
253
441
|
}
|
|
@@ -310,21 +498,18 @@
|
|
|
310
498
|
"max": 80,
|
|
311
499
|
"step": 2
|
|
312
500
|
},
|
|
313
|
-
{
|
|
314
|
-
"type": "range",
|
|
315
|
-
"id": "space_between_mb",
|
|
316
|
-
"label": "卡片间距(px)(mobile)",
|
|
317
|
-
"default": 8,
|
|
318
|
-
"min": 0,
|
|
319
|
-
"max": 80,
|
|
320
|
-
"step": 2
|
|
321
|
-
},
|
|
322
501
|
{
|
|
323
502
|
"type": "checkbox",
|
|
324
503
|
"id": "centered_slides",
|
|
325
504
|
"label": "居中显示",
|
|
326
505
|
"default": false
|
|
327
506
|
},
|
|
507
|
+
{
|
|
508
|
+
"type": "checkbox",
|
|
509
|
+
"id": "scale_active_slide",
|
|
510
|
+
"label": "当前卡片放大",
|
|
511
|
+
"default": false
|
|
512
|
+
},
|
|
328
513
|
{
|
|
329
514
|
"type": "number",
|
|
330
515
|
"id": "pre_show_index",
|
|
@@ -414,6 +599,16 @@
|
|
|
414
599
|
"label": "显示左右导航",
|
|
415
600
|
"default": true
|
|
416
601
|
},
|
|
602
|
+
{
|
|
603
|
+
"type": "select",
|
|
604
|
+
"id": "navigation_style",
|
|
605
|
+
"label": "导航样式",
|
|
606
|
+
"options": [
|
|
607
|
+
{ "value": "normal", "label": "正常" },
|
|
608
|
+
{ "value": "blur", "label": "背景模糊" }
|
|
609
|
+
],
|
|
610
|
+
"default": "normal"
|
|
611
|
+
},
|
|
417
612
|
{
|
|
418
613
|
"type": "checkbox",
|
|
419
614
|
"id": "show_navigation_mobile",
|
|
@@ -435,6 +630,7 @@
|
|
|
435
630
|
{
|
|
436
631
|
"type": "range",
|
|
437
632
|
"id": "slides_per_view_mb",
|
|
633
|
+
"info": "0表示根据内容宽度自动计算（auto）",
|
|
438
634
|
"label": "可见数(Mobile)",
|
|
439
635
|
"default": 1,
|
|
440
636
|
"min": 1,
|
|
@@ -454,8 +650,9 @@
|
|
|
454
650
|
"type": "range",
|
|
455
651
|
"id": "slides_per_view_pc",
|
|
456
652
|
"label": "可见数(PC)",
|
|
653
|
+
"info": "0表示根据内容宽度自动计算（auto）",
|
|
457
654
|
"default": 3,
|
|
458
|
-
"min":
|
|
655
|
+
"min": 0,
|
|
459
656
|
"max": 6,
|
|
460
657
|
"step": 0.1
|
|
461
658
|
},
|
|
@@ -483,7 +680,6 @@
|
|
|
483
680
|
"loop": true,
|
|
484
681
|
"speed": 500,
|
|
485
682
|
"space_between": 8,
|
|
486
|
-
"space_between_mb": 8,
|
|
487
683
|
"centered_slides": false,
|
|
488
684
|
"auto_height": false,
|
|
489
685
|
"autoplay": false,
|
|
@@ -33,6 +33,13 @@
|
|
|
33
33
|
"default": 16,
|
|
34
34
|
"info": "单位：px"
|
|
35
35
|
},
|
|
36
|
+
{
|
|
37
|
+
"type": "text",
|
|
38
|
+
"id": "desktop_aspect_ratio",
|
|
39
|
+
"label": "PC端宽高比",
|
|
40
|
+
"default": "auto",
|
|
41
|
+
"info": "填写格式如 '16/9', '4/3', '1/1' 或 'auto'"
|
|
42
|
+
},
|
|
36
43
|
{
|
|
37
44
|
"type": "header",
|
|
38
45
|
"content": "移动端设置"
|
|
@@ -87,6 +94,13 @@
|
|
|
87
94
|
"default": 10,
|
|
88
95
|
"info": "单位：px"
|
|
89
96
|
},
|
|
97
|
+
{
|
|
98
|
+
"type": "text",
|
|
99
|
+
"id": "mobile_aspect_ratio",
|
|
100
|
+
"label": "移动端图片比例",
|
|
101
|
+
"default": "auto",
|
|
102
|
+
"info": "例如: 16/9, 4/3, 1/1, 或 auto"
|
|
103
|
+
},
|
|
90
104
|
{
|
|
91
105
|
"type": "text",
|
|
92
106
|
"id": "alt",
|
|
@@ -163,10 +177,12 @@
|
|
|
163
177
|
{% if block.settings.has_link %}
|
|
164
178
|
cursor: pointer;
|
|
165
179
|
{% endif %}
|
|
166
|
-
|
|
167
180
|
}
|
|
168
181
|
|
|
169
182
|
@media screen and (max-width: 1023px) {
|
|
183
|
+
#shopify-block-{{ block.id }} .responsive-width-container img {
|
|
184
|
+
aspect-ratio: {{ block.settings.mobile_aspect_ratio }};
|
|
185
|
+
}
|
|
170
186
|
#shopify-block-{{ block.id }} {
|
|
171
187
|
{% if block.settings.mb_width_type == 'mb_use_padding' %}
|
|
172
188
|
width: 100%;
|
|
@@ -186,6 +202,9 @@
|
|
|
186
202
|
|
|
187
203
|
}
|
|
188
204
|
@media screen and (min-width: 1024px) {
|
|
205
|
+
#shopify-block-{{ block.id }} .responsive-width-container img {
|
|
206
|
+
aspect-ratio: {{ block.settings.desktop_aspect_ratio }};
|
|
207
|
+
}
|
|
189
208
|
#shopify-block-{{ block.id }} .responsive-width-container {
|
|
190
209
|
padding: 0px;
|
|
191
210
|
width: {{ block.settings.desktop_width_lg }}px;
|
|
@@ -0,0 +1,353 @@
|
|
|
1
|
+
{% schema %}
|
|
2
|
+
{
|
|
3
|
+
"name": "Responsive Video Compare",
|
|
4
|
+
"class": "responsive-width-video-compare",
|
|
5
|
+
"settings": [
|
|
6
|
+
{
|
|
7
|
+
"type": "header",
|
|
8
|
+
"content": "PC端设置"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"type": "text",
|
|
12
|
+
"id": "video_url_pc",
|
|
13
|
+
"label": "Video url PC",
|
|
14
|
+
"info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"type": "video",
|
|
18
|
+
"id": "video_pc",
|
|
19
|
+
"label": "PC端视频"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"type": "image_picker",
|
|
23
|
+
"id": "poster_pc",
|
|
24
|
+
"label": "PC端视频 封面"
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
{
|
|
28
|
+
"type": "number",
|
|
29
|
+
"id": "desktop_width_xl",
|
|
30
|
+
"label": "PC端宽度 大屏xl屏幕",
|
|
31
|
+
"default": 800,
|
|
32
|
+
"info": "单位：px"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"type": "number",
|
|
36
|
+
"id": "desktop_width_lg",
|
|
37
|
+
"label": "PC端宽度 中等屏lg屏幕",
|
|
38
|
+
"default": 600,
|
|
39
|
+
"info": "单位：px"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"type": "number",
|
|
43
|
+
"id": "desktop_border_radius",
|
|
44
|
+
"label": "PC端圆角",
|
|
45
|
+
"default": 16,
|
|
46
|
+
"info": "单位：px"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"type": "header",
|
|
50
|
+
"content": "移动端设置"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "video",
|
|
54
|
+
"id": "video_mb",
|
|
55
|
+
"label": "移动端视频"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"type": "image_picker",
|
|
59
|
+
"id": "poster_mb",
|
|
60
|
+
"label": "移动端视频封面"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"type": "checkbox",
|
|
64
|
+
"id": "mb_use_padding",
|
|
65
|
+
"label": "是否使用内边距限制宽度",
|
|
66
|
+
"default": true
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"type": "number",
|
|
70
|
+
"id": "mobile_padding_x",
|
|
71
|
+
"label": "移动端左右内边距",
|
|
72
|
+
"default": 0,
|
|
73
|
+
"info": "单位：px",
|
|
74
|
+
"visible_if": "{{ block.settings.mb_use_padding == true }}"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"type": "range",
|
|
78
|
+
"id": "mobile_width",
|
|
79
|
+
"min": 0,
|
|
80
|
+
"max": 100,
|
|
81
|
+
"step": 1,
|
|
82
|
+
"unit": "%",
|
|
83
|
+
"label": "移动端占父容器的百分比，单位%",
|
|
84
|
+
"default": 100,
|
|
85
|
+
"visible_if": "{{ block.settings.mb_use_padding == false }}"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"type": "number",
|
|
89
|
+
"id": "mobile_border_radius",
|
|
90
|
+
"label": "移动端圆角",
|
|
91
|
+
"default": 10,
|
|
92
|
+
"info": "单位：px"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"type": "header",
|
|
96
|
+
"content": "Tab对比设置"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"type": "checkbox",
|
|
100
|
+
"id": "tab_compare",
|
|
101
|
+
"label": "是否开启Tab对比",
|
|
102
|
+
"default": false
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"type": "text",
|
|
106
|
+
"id": "tab_default_title",
|
|
107
|
+
"label": "Tab默认标题",
|
|
108
|
+
"default": "Default Video",
|
|
109
|
+
"visible_if": "{{ block.settings.tab_compare == true }}"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"type": "text",
|
|
113
|
+
"id": "tab_compare_title",
|
|
114
|
+
"label": "Tab对比标题",
|
|
115
|
+
"default": "Compare Video",
|
|
116
|
+
"visible_if": "{{ block.settings.tab_compare == true }}"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"type": "text",
|
|
120
|
+
"id": "tab_compare_video_url_pc",
|
|
121
|
+
"label": "Tab对比视频 url PC",
|
|
122
|
+
"info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊",
|
|
123
|
+
"visible_if": "{{ block.settings.tab_compare == true }}"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"type": "video",
|
|
127
|
+
"id": "tab_compare_video_pc",
|
|
128
|
+
"label": "Tab对比视频 PC端视频",
|
|
129
|
+
"visible_if": "{{ block.settings.tab_compare == true }}"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"type": "image_picker",
|
|
133
|
+
"id": "tab_compare_poster_pc",
|
|
134
|
+
"label": "Tab对比视频 PC端视频 封面",
|
|
135
|
+
"visible_if": "{{ block.settings.tab_compare == true }}"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"type": "video",
|
|
139
|
+
"id": "tab_compare_video_mb",
|
|
140
|
+
"label": "移动端视频",
|
|
141
|
+
"visible_if": "{{ block.settings.tab_compare == true }}"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"type": "image_picker",
|
|
145
|
+
"id": "tab_compare_poster_mb",
|
|
146
|
+
"label": "移动端视频封面",
|
|
147
|
+
"visible_if": "{{ block.settings.tab_compare == true }}"
|
|
148
|
+
},
|
|
149
|
+
|
|
150
|
+
],
|
|
151
|
+
"presets": [
|
|
152
|
+
{
|
|
153
|
+
"name": "Responsive Video Compare"
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "宽度响应式视频对比",
|
|
157
|
+
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
{% endschema %}
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
<div id="zz-responsive-video-{{ block.id }}" class="content-video-container tw-box-border tw-overflow-hidden {% if block.settings.tab_compare == true %} tw-relative {% endif %}">
|
|
165
|
+
{% if block.settings.video_url_pc != blank %}
|
|
166
|
+
{% assign pc_video = block.settings.video_url_pc %}
|
|
167
|
+
{% else %}
|
|
168
|
+
{% assign pc_video = block.settings.video_pc %}
|
|
169
|
+
{% endif %}
|
|
170
|
+
|
|
171
|
+
{% comment %} 对比视频PC端 {% endcomment %}
|
|
172
|
+
{% if block.settings.tab_compare_video_url_pc != blank %}
|
|
173
|
+
{% assign pc_tab_compare_video = block.settings.tab_compare_video_url_pc %}
|
|
174
|
+
{% else %}
|
|
175
|
+
{% assign pc_tab_compare_video = block.settings.tab_compare_video_pc %}
|
|
176
|
+
{% endif %}
|
|
177
|
+
|
|
178
|
+
<div class="video-content-wrapper video-default tw-relative tw-z-0 tw-transition-opacity tw-duration-300">
|
|
179
|
+
{% render 'zz-video',
|
|
180
|
+
pc_video: pc_video,
|
|
181
|
+
pc_poster: block.settings.poster_pc,
|
|
182
|
+
mb_video: block.settings.video_mb,
|
|
183
|
+
mb_poster: block.settings.poster_mb,
|
|
184
|
+
lazy: true,
|
|
185
|
+
class: 'tw-w-full tw-h-auto tw-block',
|
|
186
|
+
autoplay: true,
|
|
187
|
+
loop: true,
|
|
188
|
+
muted: true
|
|
189
|
+
%}
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
{% if block.settings.tab_compare == true %}
|
|
193
|
+
<div class="video-content-wrapper video-compare tw-absolute tw-inset-0 tw-w-full tw-h-full tw-z-[-1] tw-opacity-0 tw-transition-opacity tw-duration-300">
|
|
194
|
+
{% render 'zz-video',
|
|
195
|
+
pc_video: pc_tab_compare_video,
|
|
196
|
+
pc_poster: block.settings.tab_compare_poster_pc,
|
|
197
|
+
mb_video: block.settings.tab_compare_video_mb,
|
|
198
|
+
mb_poster: block.settings.tab_compare_poster_mb,
|
|
199
|
+
lazy: true,
|
|
200
|
+
class: 'tw-w-full tw-h-full tw-object-cover tw-block',
|
|
201
|
+
autoplay: true,
|
|
202
|
+
loop: true,
|
|
203
|
+
muted: true
|
|
204
|
+
%}
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div class="tab-compare-container tw-absolute tw-bottom-[30px] tw-left-[50%] tw-translate-x-[-50%] tw-z-10">
|
|
208
|
+
<div class="zz-video-tabs tw-relative tw-flex tw-items-center tw-bg-black/60 tw-backdrop-blur-[10px] tw-rounded-full">
|
|
209
|
+
<div class="tab-item active tw-relative tw-cursor-pointer tw-px-10 tw-py-2 tw-rounded-full tw-text-[12px] md:tw-text-[14px] tw-font-medium tw-transition-colors tw-duration-300 tw-text-white/80 hover:tw-text-white tw-select-none tw-z-[1]" data-target="default">
|
|
210
|
+
{{ block.settings.tab_default_title }}
|
|
211
|
+
</div>
|
|
212
|
+
<div class="tab-item tw-relative tw-cursor-pointer tw-px-10 tw-py-2 tw-rounded-full tw-text-[12px] md:tw-text-[14px] tw-font-medium tw-transition-colors tw-duration-300 tw-text-white/80 hover:tw-text-white tw-select-none tw-z-[1]" data-target="compare">
|
|
213
|
+
{{ block.settings.tab_compare_title }}
|
|
214
|
+
</div>
|
|
215
|
+
<div class="tab-bg-slider tw-absolute tw-h-[calc(100%-4px)] tw-top-[2px] tw-left-[2px] tw-bg-white tw-rounded-full tw-transition-all tw-duration-300 tw-shadow-sm tw-z-0"></div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
{% endif %}
|
|
219
|
+
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<style>
|
|
223
|
+
#zz-responsive-video-{{ block.id }} .zz-video-tabs .tab-item.active {
|
|
224
|
+
color: #000;
|
|
225
|
+
background: #fff;
|
|
226
|
+
}
|
|
227
|
+
</style>
|
|
228
|
+
|
|
229
|
+
<script>
|
|
230
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
231
|
+
const containerId = 'zz-responsive-video-{{ block.id }}';
|
|
232
|
+
const container = document.getElementById(containerId);
|
|
233
|
+
if (!container) return;
|
|
234
|
+
|
|
235
|
+
const tabs = container.querySelectorAll('.tab-item');
|
|
236
|
+
const bgSlider = container.querySelector('.tab-bg-slider');
|
|
237
|
+
const defaultVideoWrapper = container.querySelector('.video-default');
|
|
238
|
+
const compareVideoWrapper = container.querySelector('.video-compare');
|
|
239
|
+
|
|
240
|
+
// Initial slider position
|
|
241
|
+
if (tabs.length > 0 && bgSlider) {
|
|
242
|
+
// Wait a tick for layout
|
|
243
|
+
setTimeout(() => {
|
|
244
|
+
const activeTab = container.querySelector('.tab-item.active');
|
|
245
|
+
if(activeTab) {
|
|
246
|
+
bgSlider.style.width = `${activeTab.offsetWidth}px`;
|
|
247
|
+
bgSlider.style.transform = `translateX(${activeTab.offsetLeft - 2}px)`; // -2 because offsetLeft includes parent padding in this context? No, offsetLeft is relative to parent.
|
|
248
|
+
// Let's rely on standard offsetLeft. The parent has 2px padding.
|
|
249
|
+
// The first item starts at 2px.
|
|
250
|
+
bgSlider.style.transform = `translateX(${activeTab.offsetLeft - 2}px)`;
|
|
251
|
+
}
|
|
252
|
+
}, 50);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
if (tabs.length > 0 && defaultVideoWrapper && compareVideoWrapper) {
|
|
256
|
+
tabs.forEach(tab => {
|
|
257
|
+
tab.addEventListener('click', () => {
|
|
258
|
+
if (tab.classList.contains('active')) return;
|
|
259
|
+
|
|
260
|
+
// Update Tabs
|
|
261
|
+
tabs.forEach(t => t.classList.remove('active'));
|
|
262
|
+
tab.classList.add('active');
|
|
263
|
+
|
|
264
|
+
// Update Slider
|
|
265
|
+
if(bgSlider) {
|
|
266
|
+
bgSlider.style.width = `${tab.offsetWidth}px`;
|
|
267
|
+
bgSlider.style.transform = `translateX(${tab.offsetLeft - 2}px)`;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
const target = tab.dataset.target;
|
|
271
|
+
|
|
272
|
+
if (target === 'default') {
|
|
273
|
+
// Show Default
|
|
274
|
+
defaultVideoWrapper.classList.remove('tw-opacity-0');
|
|
275
|
+
defaultVideoWrapper.classList.add('tw-z-0');
|
|
276
|
+
|
|
277
|
+
compareVideoWrapper.classList.add('tw-opacity-0');
|
|
278
|
+
compareVideoWrapper.classList.remove('tw-z-0');
|
|
279
|
+
compareVideoWrapper.classList.add('tw-z-[-1]');
|
|
280
|
+
|
|
281
|
+
pauseVideo(compareVideoWrapper);
|
|
282
|
+
playVideo(defaultVideoWrapper);
|
|
283
|
+
} else {
|
|
284
|
+
// Show Compare
|
|
285
|
+
defaultVideoWrapper.classList.add('tw-opacity-0');
|
|
286
|
+
defaultVideoWrapper.classList.remove('tw-z-0');
|
|
287
|
+
|
|
288
|
+
compareVideoWrapper.classList.remove('tw-opacity-0');
|
|
289
|
+
compareVideoWrapper.classList.remove('tw-z-[-1]');
|
|
290
|
+
compareVideoWrapper.classList.add('tw-z-0');
|
|
291
|
+
|
|
292
|
+
pauseVideo(defaultVideoWrapper);
|
|
293
|
+
playVideo(compareVideoWrapper);
|
|
294
|
+
}
|
|
295
|
+
});
|
|
296
|
+
});
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
function playVideo(wrapper) {
|
|
300
|
+
const video = wrapper.querySelector('video');
|
|
301
|
+
if (video) {
|
|
302
|
+
// video.currentTime = 0; // Removing this to let it play smoothly
|
|
303
|
+
video.play().catch(e => console.log('Play error:', e));
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
function pauseVideo(wrapper) {
|
|
308
|
+
const video = wrapper.querySelector('video');
|
|
309
|
+
if (video) {
|
|
310
|
+
video.pause();
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
});
|
|
314
|
+
</script>
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
<style>
|
|
318
|
+
|
|
319
|
+
#zz-responsive-video-{{ block.id }}.content-video-container {
|
|
320
|
+
box-sizing: border-box;
|
|
321
|
+
overflow: hidden;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
@media screen and (max-width: 1023px) {
|
|
325
|
+
#shopify-block-{{ block.id }} {
|
|
326
|
+
{% if block.settings.mb_use_padding %}
|
|
327
|
+
width: 100%;
|
|
328
|
+
{% else %}
|
|
329
|
+
width: {{ block.settings.mobile_width }}%
|
|
330
|
+
{% endif %}
|
|
331
|
+
}
|
|
332
|
+
#zz-responsive-video-{{ block.id }}.content-video-container {
|
|
333
|
+
border-radius: {{ block.settings.mobile_border_radius }}px;
|
|
334
|
+
{% if block.settings.mb_use_padding %}
|
|
335
|
+
padding: 0 {{ block.settings.mobile_padding_x }}px;
|
|
336
|
+
{% endif %}
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
}
|
|
340
|
+
@media screen and (min-width: 1024px) {
|
|
341
|
+
#zz-responsive-video-{{ block.id }}.content-video-container {
|
|
342
|
+
padding: 0px;
|
|
343
|
+
width: {{ block.settings.desktop_width_lg }}px;
|
|
344
|
+
border-radius: {{ block.settings.desktop_border_radius }}px;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
@media screen and (min-width: 1280px) {
|
|
348
|
+
#zz-responsive-video-{{ block.id }}.content-video-container {
|
|
349
|
+
width: {{ block.settings.desktop_width_xl }}px;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
</style>
|
|
@@ -67,6 +67,16 @@
|
|
|
67
67
|
],
|
|
68
68
|
"default": "center"
|
|
69
69
|
},
|
|
70
|
+
{
|
|
71
|
+
"type": "range",
|
|
72
|
+
"id": "pc_top",
|
|
73
|
+
"min": 0,
|
|
74
|
+
"max": 100,
|
|
75
|
+
"step": 1,
|
|
76
|
+
"unit": "%",
|
|
77
|
+
"label": "PC标题距离顶部高度百分比，单位%",
|
|
78
|
+
"default": 50
|
|
79
|
+
},
|
|
70
80
|
{
|
|
71
81
|
"type": "range",
|
|
72
82
|
"id": "mb_top",
|
|
@@ -110,7 +120,7 @@
|
|
|
110
120
|
|
|
111
121
|
</div>
|
|
112
122
|
|
|
113
|
-
<div class="text-overlay
|
|
123
|
+
<div class="text-overlay tw-absolute tw-w-full">
|
|
114
124
|
{% case block.settings.tag %}
|
|
115
125
|
{% when 'h2' %}
|
|
116
126
|
{% render 'zz-h2',
|
|
@@ -194,7 +204,7 @@
|
|
|
194
204
|
}
|
|
195
205
|
#shopify-block-{{ block.id }} .text-overlay {
|
|
196
206
|
position: absolute;
|
|
197
|
-
top:
|
|
207
|
+
top: {{ block.settings.pc_top }}%;
|
|
198
208
|
left: 50%;
|
|
199
209
|
transform: translate(-50%,-50%);
|
|
200
210
|
max-width: 70%;
|
package/package.json
CHANGED
|
@@ -100,28 +100,34 @@
|
|
|
100
100
|
{% assign btn_class = 'zz-button' | append: section.id %}
|
|
101
101
|
|
|
102
102
|
<div class="tw-w-full tw-px-8">
|
|
103
|
-
<div class="zz-navigation-pc-tab max-lg:tw-hidden lg:tw-h-[
|
|
103
|
+
<div class="zz-navigation-pc-tab max-lg:tw-hidden lg:tw-h-[50px] tw-flex tw-items-center tw-justify-between tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto">
|
|
104
104
|
<img
|
|
105
105
|
class="tw-w-[134px] tw-h-[12px]"
|
|
106
106
|
src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
|
|
107
107
|
<div class="zz-navigation-pc-item-box tw-flex tw-items-center tw-overflow-x-scroll tw-ml-[40px] tw-pr-[60px]">
|
|
108
|
-
{
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
108
|
+
{%- if section.blocks.size > 0 -%}
|
|
109
|
+
{% for block in section.blocks %}
|
|
110
|
+
<div class="pc-tab-item tw-flex-shrink-0 tw-px-[30px]">
|
|
111
|
+
|
|
112
|
+
<span
|
|
113
|
+
class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[14px] tw-leading-[14px] tw-font-[400]"
|
|
114
|
+
data-target="{{ block.settings.module_name }}"
|
|
115
|
+
>{{ block.settings.text }}</span>
|
|
116
|
+
|
|
117
|
+
</div>
|
|
118
|
+
{% unless forloop.last %}
|
|
119
|
+
<div class="pc-tab-item-last tw-w-[1px] tw-h-[16px] tw-bg-[#9E9E9E]"> </div>
|
|
120
|
+
{% endunless %}
|
|
121
|
+
{% endfor %}
|
|
122
|
+
{%- endif -%}
|
|
123
|
+
|
|
121
124
|
</div>
|
|
122
125
|
{% if section.settings.btn_text != blank %}
|
|
123
126
|
<div class="tw-flex-shrink-0 tw-relative">
|
|
127
|
+
{%- if section.blocks.size > 0 -%}
|
|
124
128
|
<div class="cover-box tw-absolute tw-top-0 tw-left-[-50px] tw-w-[50px] tw-h-full"> </div>
|
|
129
|
+
|
|
130
|
+
{%- endif -%}
|
|
125
131
|
{% render 'zz-button',
|
|
126
132
|
href: section.settings.url,
|
|
127
133
|
type: 'primary',
|
|
@@ -139,6 +145,11 @@
|
|
|
139
145
|
|
|
140
146
|
<div class="zz-navigation-mobile-tab lg:tw-hidden tw-h-[52px] tw-flex tw-items-center tw-justify-between tw-px-8">
|
|
141
147
|
<div class="mb-navigation-box-item zz-navigation-mb-item-box tw-flex tw-items-center tw-gap-[24px] tw-pr-[120px] tw-h-[52px] tw-overflow-x-scroll">
|
|
148
|
+
{%- if section.blocks.size == 0 -%}
|
|
149
|
+
<img
|
|
150
|
+
class="tw-w-[134px] tw-h-[12px]"
|
|
151
|
+
src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
|
|
152
|
+
{%- endif -%}
|
|
142
153
|
{% for block in section.blocks %}
|
|
143
154
|
<div class="pc-tab-item tw-flex-shrink-0">
|
|
144
155
|
|
|
@@ -151,7 +162,9 @@
|
|
|
151
162
|
{% endfor %}
|
|
152
163
|
</div>
|
|
153
164
|
<div class="tw-flex-shrink-0 tw-relative">
|
|
165
|
+
{%- if section.blocks.size > 0 -%}
|
|
154
166
|
<div class="cover-box tw-absolute tw-top-0 tw-left-[-40px] tw-w-[40px] tw-h-full"> </div>
|
|
167
|
+
{%- endif -%}
|
|
155
168
|
{% render 'zz-button',
|
|
156
169
|
href: section.settings.url,
|
|
157
170
|
type: 'primary',
|
|
@@ -205,7 +218,7 @@
|
|
|
205
218
|
tab.addEventListener('click', () => {
|
|
206
219
|
const id = tab.dataset.target;
|
|
207
220
|
const target = document.querySelector(`[data-zz-module-name="${id}"]`);
|
|
208
|
-
const headerHeight = isDesktop ?
|
|
221
|
+
const headerHeight = isDesktop ? 50 : 50;
|
|
209
222
|
const offsetTop = target.offsetTop - headerHeight;
|
|
210
223
|
scrollPaginationToCenter();
|
|
211
224
|
window.scrollTo(0, offsetTop);
|
|
@@ -5,58 +5,69 @@
|
|
|
5
5
|
{% endcomment %}
|
|
6
6
|
{% if type == 'prev' %}
|
|
7
7
|
{% if color_type == 'light' %}
|
|
8
|
-
<svg
|
|
8
|
+
<svg
|
|
9
|
+
width='48'
|
|
10
|
+
height='48'
|
|
11
|
+
viewBox='0 0 48 48'
|
|
12
|
+
fill='none'
|
|
13
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
14
|
+
>
|
|
9
15
|
<foreignObject x="-12" y="-12" width="72" height="72"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_15512_12512_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="12" width="48" height="48" rx="24" fill="white" fill-opacity="0.3"/>
|
|
10
16
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 24L26.0711 16.9289L26.0608 19.1149L21.1757 24L26.0711 28.8718L26.0711 31.0711L19 24Z" fill="white"/>
|
|
11
17
|
<defs>
|
|
12
18
|
<clipPath id="bgblur_0_15512_12512_clip_path" transform="translate(12 12)"><rect width="48" height="48" rx="24"/>
|
|
13
19
|
</clipPath></defs>
|
|
14
|
-
|
|
20
|
+
</svg>
|
|
15
21
|
{% else %}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
<svg
|
|
23
|
+
width='48'
|
|
24
|
+
height='48'
|
|
25
|
+
viewBox='0 0 48 48'
|
|
26
|
+
fill='none'
|
|
27
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
28
|
+
>
|
|
29
|
+
<foreignObject x="-12" y="-12" width="72" height="72"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_27103_325_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="12">
|
|
30
|
+
<rect width="48" height="48" rx="24" fill="black" fill-opacity="0.03"/>
|
|
31
|
+
<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="black" stroke-opacity="0.06"/>
|
|
32
|
+
</g>
|
|
33
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 24L26.0711 16.9289L26.0608 19.1149L21.1757 24L26.0711 28.8718L26.0711 31.0711L19 24Z" fill="black"/>
|
|
34
|
+
<defs>
|
|
35
|
+
<clipPath id="bgblur_0_27103_325_clip_path" transform="translate(12 12)"><rect width="48" height="48" rx="24"/>
|
|
36
|
+
</clipPath></defs>
|
|
37
|
+
</svg>
|
|
33
38
|
{% endif %}
|
|
34
39
|
{% else %}
|
|
35
40
|
{% if color_type == 'light' %}
|
|
36
|
-
<svg
|
|
41
|
+
<svg
|
|
42
|
+
width='48'
|
|
43
|
+
height='48'
|
|
44
|
+
viewBox='0 0 48 48'
|
|
45
|
+
fill='none'
|
|
46
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
47
|
+
>
|
|
37
48
|
<foreignObject x="-12" y="-12" width="72" height="72"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_15512_12506_clip_path);height:100%;width:100%"></div></foreignObject><rect data-figma-bg-blur-radius="12" width="48" height="48" rx="24" fill="white" fill-opacity="0.3"/>
|
|
38
49
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 24L21.9289 16.9289L21.9392 19.1149L26.8243 24L21.9289 28.8718L21.9289 31.0711L29 24Z" fill="white"/>
|
|
39
50
|
<defs>
|
|
40
51
|
<clipPath id="bgblur_0_15512_12506_clip_path" transform="translate(12 12)"><rect width="48" height="48" rx="24"/>
|
|
41
52
|
</clipPath></defs>
|
|
42
|
-
|
|
43
|
-
|
|
53
|
+
</svg>
|
|
54
|
+
|
|
44
55
|
{% else %}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
56
|
+
<svg
|
|
57
|
+
width='48'
|
|
58
|
+
height='48'
|
|
59
|
+
viewBox='0 0 48 48'
|
|
60
|
+
fill='none'
|
|
61
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
62
|
+
>
|
|
63
|
+
<foreignObject x="-12" y="-12" width="72" height="72"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6px);clip-path:url(#bgblur_0_27103_338_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="12">
|
|
64
|
+
<rect width="48" height="48" rx="24" fill="black" fill-opacity="0.03"/>
|
|
65
|
+
<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="black" stroke-opacity="0.06"/>
|
|
66
|
+
</g>
|
|
67
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 24L21.9289 16.9289L21.9392 19.1149L26.8243 24L21.9289 28.8718L21.9289 31.0711L29 24Z" fill="black"/>
|
|
68
|
+
<defs>
|
|
69
|
+
<clipPath id="bgblur_0_27103_338_clip_path" transform="translate(12 12)"><rect width="48" height="48" rx="24"/>
|
|
70
|
+
</clipPath></defs>
|
|
71
|
+
</svg>
|
|
61
72
|
{% endif %}
|
|
62
73
|
{% endif %}
|