PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 All 39 releases
← All changes | includes/widgets/Card_Carousel/Card_Carousel.php +3502 -0 51.1.2 → 51.1.83 View file →
@@ -1,0 +1,3502 @@
1 +<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2 +
3 +namespace King_Addons;
4 +
5 +use Elementor\Controls_Manager;
6 +use Elementor\Group_Control_Background;
7 +use Elementor\Group_Control_Border;
8 +use Elementor\Group_Control_Box_Shadow;
9 +use Elementor\Group_Control_Css_Filter;
10 +use Elementor\Group_Control_Image_Size;
11 +use Elementor\Group_Control_Typography;
12 +use Elementor\Icons_Manager;
13 +use Elementor\Repeater;
14 +use Elementor\Utils;
15 +use Elementor\Widget_Base;
16 +
17 +if (!defined('ABSPATH')) {
18 + exit; // Exit if accessed directly.
19 +}
20 +
21 +
22 +
23 +class Card_Carousel extends Widget_Base
24 +{
25 +
26 +
27 + public function get_name(): string
28 + {
29 + return 'king-addons-card-carousel';
30 + }
31 +
32 + public function get_title(): string
33 + {
34 + return esc_html__('Advanced Card Carousel', 'king-addons');
35 + }
36 +
37 + public function get_icon(): string
38 + {
39 + return 'king-addons-icon king-addons-card-carousel';
40 + }
41 +
42 + public function get_script_depends(): array
43 + {
44 + return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper'];
45 + }
46 +
47 + public function get_style_depends(): array
48 + {
49 + return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper', KING_ADDONS_ASSETS_UNIQUE_KEY . '-card-carousel-style'];
50 + }
51 +
52 + public function get_categories(): array
53 + {
54 + return ['king-addons'];
55 + }
56 +
57 + public function get_keywords(): array
58 + {
59 + return ['card', 'carousel', 'slider', 'scroller', 'swiper', 'content', 'button', 'dot', 'dots', 'navigation',
60 + 'cards', 'wheel', 'touch', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link',
61 + 'left', 'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'dragging', 'hover', 'over',
62 + 'hover over', 'picture', 'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons',
63 + 'mouseover', 'page', 'card carousel', 'kingaddons', 'king-addons', 'team', 'members', 'testimonial',
64 + 'testimonials', 'reviews', ' team memebers', 'drag', 'scroll', 'scrolling', 'tabs', 'tab'];
65 + }
66 +
67 + public function get_custom_help_url()
68 + {
69 + return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
70 + }
71 +
72 + protected function register_controls(): void
73 + {
74 + /** START TAB: CONTENT ===================== */
75 + /** SECTION: Carousel Settings */
76 + $this->start_controls_section(
77 + 'kng_card_carousel_content_section_caousel_settings',
78 + [
79 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Carousel Settings', 'king-addons'),
80 + 'tab' => Controls_Manager::TAB_CONTENT,
81 + ]
82 + );
83 +
84 + $this->add_control(
85 + 'kng_card_carousel_loop_switcher',
86 + [
87 + 'label' => esc_html__('Loop Cards', 'king-addons'),
88 + 'type' => Controls_Manager::SWITCHER,
89 + 'default' => 'yes'
90 + ]
91 + );
92 +
93 + $this->add_control(
94 + 'kng_card_carousel_rewind_switcher',
95 + [
96 + 'label' => esc_html__('Rewind Cards', 'king-addons'),
97 + 'description' => esc_html__('When enabled, clicking the next navigation button when on last slide will slide back to the first slide. Clicking the prev navigation button when on first slide will slide forward to the last slide. Should not be used together with loop mode.', 'king-addons'),
98 + 'type' => Controls_Manager::SWITCHER
99 + ]
100 + );
101 +
102 + $this->add_control(
103 + 'kng_card_carousel_autoplay_switcher',
104 + [
105 + 'label' => esc_html__('Autoplay Carousel Cards', 'king-addons'),
106 + 'type' => Controls_Manager::SWITCHER,
107 + 'separator' => 'before',
108 + ]
109 + );
110 +
111 + $this->add_control(
112 + 'kng_card_carousel_autoplay_delay',
113 + [
114 + 'label' => esc_html__('Delay between transitions (ms)', 'king-addons'),
115 + 'type' => Controls_Manager::NUMBER,
116 + 'min' => 0,
117 + 'step' => 10,
118 + 'default' => 2000,
119 + 'condition' => [
120 + 'kng_card_carousel_autoplay_switcher!' => '',
121 + 'kng_card_carousel_autoplay_like_ticker_switcher!' => 'yes',
122 + ]
123 + ]
124 + );
125 +
126 + $this->add_control(
127 + 'kng_card_carousel_autoplay_disableoninteraction_switcher',
128 + [
129 + 'label' => esc_html__('Disable on interaction', 'king-addons'),
130 + 'description' => esc_html__('Autoplay will be disabled after user interactions (swipes), it will not be restarted every time after interaction.', 'king-addons'),
131 + 'type' => Controls_Manager::SWITCHER,
132 + 'condition' => [
133 + 'kng_card_carousel_autoplay_switcher!' => '',
134 + ]
135 + ]
136 + );
137 +
138 + $this->add_control(
139 + 'kng_card_carousel_autoplay_pausedonmouseenter_switcher',
140 + [
141 + 'label' => esc_html__('Pause on mouse enter', 'king-addons'),
142 + 'description' => esc_html__('When enabled autoplay will be paused on pointer (mouse) enter over carousel container.', 'king-addons'),
143 + 'type' => Controls_Manager::SWITCHER,
144 + 'condition' => [
145 + 'kng_card_carousel_autoplay_switcher!' => '',
146 + ]
147 + ]
148 + );
149 +
150 + $this->add_control(
151 + 'kng_card_carousel_autoplay_reversedirection_switcher',
152 + [
153 + 'label' => esc_html__('Reverse Direction', 'king-addons'),
154 + 'description' => esc_html__('Enables autoplay in reverse direction.', 'king-addons'),
155 + 'type' => Controls_Manager::SWITCHER,
156 + 'condition' => [
157 + 'kng_card_carousel_autoplay_switcher!' => '',
158 + ]
159 + ]
160 + );
161 +
162 + $this->add_control(
163 + 'kng_card_carousel_autoplay_like_ticker_switcher',
164 + [
165 + 'label' => esc_html__('Autoplay Like Ticker (marquee effect)', 'king-addons'),
166 + 'description' => esc_html__('Autoscrolls cards as on ticker, also known as marquee effect.', 'king-addons'),
167 + 'type' => Controls_Manager::SWITCHER,
168 + 'condition' => [
169 + 'kng_card_carousel_autoplay_switcher!' => '',
170 + ],
171 + ]
172 + );
173 +
174 + $this->add_control(
175 + 'kng_card_carousel_autoplay_like_ticker_autoplay_speed',
176 + [
177 + 'label' => esc_html__('Autoplay Speed (ms)', 'king-addons'),
178 + 'type' => Controls_Manager::NUMBER,
179 + 'min' => 0,
180 + 'step' => 10,
181 + 'default' => 6000,
182 + 'condition' => [
183 + 'kng_card_carousel_autoplay_like_ticker_switcher' => 'yes',
184 + ]
185 + ]
186 + );
187 +
188 + $this->add_control(
189 + 'kng_card_carousel_scrolling_speed',
190 + [
191 + 'label' => esc_html__('Scrolling Speed (ms)', 'king-addons'),
192 + 'type' => Controls_Manager::NUMBER,
193 + 'min' => 0,
194 + 'step' => 10,
195 + 'default' => 600,
196 + 'separator' => 'before',
197 + 'condition' => [
198 + 'kng_card_carousel_autoplay_like_ticker_switcher!' => 'yes',
199 + ]
200 + ]
201 + );
202 +
203 + $this->end_controls_section();
204 + /** END SECTION: Carousel Settings */
205 +
206 + /** SECTION: Cards ===================== */
207 + $this->start_controls_section(
208 + 'kng_card_carousel_content_section_cards',
209 + [
210 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Cards', 'king-addons'),
211 + 'tab' => Controls_Manager::TAB_CONTENT,
212 + ]
213 + );
214 +
215 + $repeater = new Repeater();
216 +
217 + $repeater->add_control(
218 + 'kng_card_carousel_image',
219 + [
220 + 'label' => '<b>' . esc_html__('Image', 'king-addons') . '</b>',
221 + 'type' => Controls_Manager::MEDIA,
222 + 'default' => [
223 + 'url' => Utils::get_placeholder_image_src(),
224 + ]
225 + ]
226 + );
227 +
228 + $repeater->add_group_control(
229 + Group_Control_Image_Size::get_type(),
230 + [
231 + 'name' => 'kng_card_carousel_image_size',
232 + 'default' => 'full',
233 + ]
234 + );
235 +
236 + $repeater->add_control(
237 + 'kng_card_carousel_image_link',
238 + [
239 + 'label' => esc_html__('Image Link', 'king-addons'),
240 + 'type' => Controls_Manager::URL,
241 + ]
242 + );
243 +
244 + $repeater->add_control(
245 + 'kng_card_carousel_imagedescription_title',
246 + [
247 + 'label' => '<b>' . esc_html__('Image Description', 'king-addons') . '</b>',
248 + 'type' => Controls_Manager::RAW_HTML,
249 + 'separator' => 'before'
250 + ]
251 + );
252 +
253 + $repeater->add_control(
254 + 'kng_card_carousel_imagedescription',
255 + [
256 + 'label' => esc_html__('Image Description', 'king-addons'),
257 + 'description' => esc_html__('The text below the image.', 'king-addons'),
258 + 'type' => Controls_Manager::TEXT,
259 + ]
260 + );
261 +
262 + $repeater->add_control(
263 + 'kng_card_carousel_imagedescription_custom_color',
264 + [
265 + 'label' => esc_html__('Text Color', 'king-addons'),
266 + 'type' => Controls_Manager::COLOR,
267 + 'default' => '',
268 + 'selectors' => [
269 + '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-card-carousel-imagedescription' => 'color: {{VALUE}}'
270 + ],
271 + 'condition' => [
272 + 'kng_card_carousel_imagedescription_custom_styles' => 'yes',
273 + ]
274 + ]
275 + );
276 +
277 + $repeater->add_control(
278 + 'kng_card_carousel_whole_card_title',
279 + [
280 + 'label' => '<b>' . esc_html__('Whole Card', 'king-addons') . '</b>',
281 + 'type' => Controls_Manager::RAW_HTML,
282 + 'separator' => 'before'
283 + ]
284 + );
285 +
286 + $repeater->add_control(
287 + 'kng_card_carousel_whole_card_link',
288 + [
289 + 'label' => esc_html__('Whole card link', 'king-addons'),
290 + 'type' => Controls_Manager::URL,
291 + ]
292 + );
293 +
294 + $repeater->add_group_control(
295 + Group_Control_Background::get_type(),
296 + [
297 + 'name' => 'kng_card_carousel_card_bg_custom',
298 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .king-addons-card-carousel-card-inner',
299 + ]
300 + );
301 +
302 + $repeater->add_control(
303 + 'kng_card_carousel_title',
304 + [
305 + 'label' => '<b>' . esc_html__('Title', 'king-addons') . '</b>',
306 + 'type' => Controls_Manager::TEXT,
307 + 'label_block' => true,
308 + 'default' => esc_html__('Title', 'king-addons'),
309 + 'separator' => 'before'
310 + ]
311 + );
312 +
313 + $repeater->add_control(
314 + 'kng_card_carousel_subtitle',
315 + [
316 + 'label' => '<b>' . esc_html__('Subtitle', 'king-addons') . '</b>',
317 + 'type' => Controls_Manager::TEXT,
318 + 'label_block' => true,
319 + 'default' => esc_html__('Subtitle', 'king-addons'),
320 + 'separator' => 'before'
321 + ]
322 + );
323 +
324 + // Button
325 + $repeater->add_control(
326 + 'kkng_card_carousel_btn_title',
327 + [
328 + 'label' => '<b>' . esc_html__('Button', 'king-addons') . '</b>',
329 + 'type' => Controls_Manager::RAW_HTML,
330 + 'separator' => 'before'
331 + ]
332 + );
333 +
334 + $repeater->add_control(
335 + 'kng_card_carousel_btn_text',
336 + [
337 + 'label' => esc_html__('Button Text', 'king-addons'),
338 + 'type' => Controls_Manager::TEXT,
339 + 'default' => '',
340 + ]
341 + );
342 +
343 + $repeater->add_control(
344 + 'kng_card_carousel_btn_link',
345 + [
346 + 'label' => esc_html__('Link', 'king-addons'),
347 + 'type' => Controls_Manager::URL,
348 + ]
349 + );
350 +
351 + $repeater->add_control(
352 + 'kng_card_carousel_description_title',
353 + [
354 + 'label' => '<b>' . esc_html__('Description', 'king-addons') . '</b>',
355 + 'type' => Controls_Manager::RAW_HTML,
356 + 'separator' => 'before',
357 + ]
358 + );
359 +
360 + $repeater->add_control(
361 + 'kng_card_carousel_description',
362 + [
363 + 'label' => '<b>' . esc_html__('Description', 'king-addons') . '</b>',
364 + 'type' => Controls_Manager::WYSIWYG,
365 + 'show_label' => false,
366 + 'default' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'king-addons'),
367 + 'placeholder' => esc_html__('Type the description here', 'king-addons'),
368 + ]
369 + );
370 +
371 + $default_cards = [
372 + 'kng_card_carousel_image' => Utils::get_placeholder_image_src(),
373 + 'kng_card_carousel_title' => esc_html__('Title', 'king-addons'),
374 + 'kng_card_carousel_subtitle' => esc_html__('Subtitle', 'king-addons'),
375 + 'kng_card_carousel_description' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'king-addons'),
376 + ];
377 +
378 + $this->add_control(
379 + 'kng_card_carousel_content_items',
380 + [
381 + 'type' => Controls_Manager::REPEATER,
382 + 'fields' => $repeater->get_controls(),
383 + 'default' => array_fill(0, 5, $default_cards),
384 + 'title_field' => '{{kng_card_carousel_title}}',
385 + ]
386 + );
387 +
388 + $this->end_controls_section();
389 + /** END SECTION: Cards ===================== */
390 +
391 + /** SECTION: Disable Card Items */
392 + $this->start_controls_section(
393 + 'kng_card_carousel_content_section_disable_card_items',
394 + [
395 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Disable Card Items', 'king-addons'),
396 + 'tab' => Controls_Manager::TAB_CONTENT,
397 + ]
398 + );
399 +
400 + $this->add_control(
401 + 'kng_card_carousel_cards_image_switcher',
402 + [
403 + 'label' => esc_html__('Disable Image', 'king-addons'),
404 + 'type' => Controls_Manager::SWITCHER,
405 + 'separator' => 'before',
406 + ]
407 + );
408 +
409 + $this->add_control(
410 + 'kng_card_carousel_cards_imagedescription_switcher',
411 + [
412 + 'label' => esc_html__('Disable Image Description', 'king-addons'),
413 + 'type' => Controls_Manager::SWITCHER,
414 + ]
415 + );
416 +
417 + $this->add_control(
418 + 'kng_card_carousel_cards_title_switcher',
419 + [
420 + 'label' => esc_html__('Disable Title', 'king-addons'),
421 + 'type' => Controls_Manager::SWITCHER,
422 + ]
423 + );
424 +
425 + $this->add_control(
426 + 'kng_card_carousel_cards_subtitle_switcher',
427 + [
428 + 'label' => esc_html__('Disable Subtitle', 'king-addons'),
429 + 'type' => Controls_Manager::SWITCHER,
430 + ]
431 + );
432 +
433 + $this->add_control(
434 + 'kng_card_carousel_cards_description_switcher',
435 + [
436 + 'label' => esc_html__('Disable Description', 'king-addons'),
437 + 'type' => Controls_Manager::SWITCHER,
438 + ]
439 + );
440 +
441 + $this->add_control(
442 + 'kng_card_carousel_cards_whole_image_container_switcher',
443 + [
444 + 'label' => esc_html__('Disable whole image container', 'king-addons'),
445 + 'description' => esc_html__('Image container includes image and image description.', 'king-addons'),
446 + 'type' => Controls_Manager::SWITCHER,
447 + 'separator' => 'before',
448 + ]
449 + );
450 +
451 + $this->add_control(
452 + 'kng_card_carousel_cards_whole_text_container_switcher',
453 + [
454 + 'label' => esc_html__('Disable whole text container', 'king-addons'),
455 + 'description' => esc_html__('Text container includes title, subtitle, description and button.', 'king-addons'),
456 + 'type' => Controls_Manager::SWITCHER,
457 + ]
458 + );
459 +
460 + $this->end_controls_section();
461 + /** END SECTION: Disable Card Items */
462 +
463 + /** SECTION: Card Layout */
464 + $this->start_controls_section(
465 + 'kng_card_carousel_content_section_card_layout',
466 + [
467 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Card Layout', 'king-addons'),
468 + 'tab' => Controls_Manager::TAB_CONTENT,
469 + ]
470 + );
471 +
472 + $this->add_control(
473 + 'kng_card_carousel_cards_whole_card_title',
474 + [
475 + 'label' => '<b>' . esc_html__('Whole Card', 'king-addons') . '</b>',
476 + 'type' => Controls_Manager::RAW_HTML,
477 + ]
478 + );
479 +
480 + $this->add_responsive_control(
481 + 'kng_card_carousel_cards_whole_card_align_card_full_height',
482 + [
483 + 'label' => esc_html__('Make card full height', 'king-addons'),
484 + 'type' => Controls_Manager::SELECT,
485 + 'default' => '100%',
486 + 'options' => [
487 + '100%' => esc_html__('No', 'king-addons'),
488 + 'auto' => esc_html__('Yes', 'king-addons'),
489 + ],
490 + 'selectors' => [
491 + '{{WRAPPER}} .king-addons-card-carousel-card' => 'height: {{VALUE}};'
492 + ],
493 + ]
494 + );
495 +
496 + $this->add_responsive_control(
497 + 'kng_card_carousel_cards_whole_card_align_card',
498 + [
499 + 'label' => esc_html__('Align Whole Card', 'king-addons'),
500 + 'type' => Controls_Manager::SELECT,
501 + 'options' => [
502 + 'unset' => esc_html__('Default', 'king-addons'),
503 + 'start' => esc_html__('Start', 'king-addons'),
504 + 'center' => esc_html__('Center', 'king-addons'),
505 + 'end' => esc_html__('End', 'king-addons'),
506 + ],
507 + 'default' => 'unset',
508 + 'selectors' => [
509 + '{{WRAPPER}} .king-addons-card-carousel-card' => 'align-self: {{VALUE}};'
510 + ],
511 + 'condition' => [
512 + 'kng_card_carousel_cards_whole_card_align_card_full_height' => '100%'
513 + ],
514 + ]
515 + );
516 +
517 + $this->add_responsive_control(
518 + 'kng_card_carousel_cards_whole_card_align_card_content',
519 + [
520 + 'label' => esc_html__('Align Card Content', 'king-addons'),
521 + 'type' => Controls_Manager::SELECT,
522 + 'options' => [
523 + 'unset' => esc_html__('Default', 'king-addons'),
524 + 'start' => esc_html__('Start', 'king-addons'),
525 + 'center' => esc_html__('Center', 'king-addons'),
526 + 'end' => esc_html__('End', 'king-addons'),
527 + ],
528 + 'default' => 'start',
529 + 'selectors' => [
530 + '{{WRAPPER}} .king-addons-card-carousel-card .king-addons-card-carousel-card-inner' => 'justify-content: {{VALUE}};'
531 + ],
532 + 'condition' => [
533 + 'kng_card_carousel_cards_whole_card_align_card_full_height' => 'auto'
534 + ],
535 + ]
536 + );
537 +
538 + $this->add_control(
539 + 'kng_card_carousel_cards_image_container_title',
540 + [
541 + 'label' => '<b>' . esc_html__('Image Container', 'king-addons') . '</b>' .
542 + '<div class="elementor-control-field-description">' .
543 + esc_html__('Image container includes image and image description.', 'king-addons') .
544 + '</div>',
545 + 'type' => Controls_Manager::RAW_HTML,
546 + ]
547 + );
548 +
549 + $this->add_responsive_control(
550 + 'kng_card_carousel_cards_image_container_position',
551 + [
552 + 'label' => esc_html__('Position', 'king-addons'),
553 + 'type' => Controls_Manager::CHOOSE,
554 + 'default' => 'column',
555 + 'options' => [
556 + 'row' => [
557 + 'title' => esc_html__('Left', 'king-addons'),
558 + 'icon' => 'eicon-h-align-left',
559 + ],
560 + 'column' => [
561 + 'title' => esc_html__('Top', 'king-addons'),
562 + 'icon' => 'eicon-v-align-top',
563 + ],
564 + 'column-reverse' => [
565 + 'title' => esc_html__('Bottom', 'king-addons'),
566 + 'icon' => 'eicon-v-align-bottom',
567 + ],
568 + 'row-reverse' => [
569 + 'title' => esc_html__('Right', 'king-addons'),
570 + 'icon' => 'eicon-h-align-right',
571 + ],
572 + ],
573 + 'selectors' => [
574 + '{{WRAPPER}} .king-addons-card-carousel-card-inner' => 'flex-flow: {{VALUE}};'
575 + ],
576 + ]
577 + );
578 +
579 + $this->add_responsive_control(
580 + 'kng_card_carousel_cards_image_container_width_type',
581 + [
582 + 'label' => esc_html__('Width', 'king-addons'),
583 + 'type' => Controls_Manager::SELECT,
584 + 'options' => [
585 + 'auto' => esc_html__('Auto', 'king-addons'),
586 + 'custom' => esc_html__('Custom (%)', 'king-addons'),
587 + ],
588 + 'default' => 'custom',
589 + ]
590 + );
591 +
592 + $this->add_responsive_control(
593 + 'kng_card_carousel_cards_image_container_width',
594 + [
595 + 'label' => esc_html__('Custom width (%)', 'king-addons'),
596 + 'type' => Controls_Manager::NUMBER,
597 + 'min' => 0,
598 + 'step' => 1,
599 + 'max' => 100,
600 + 'default' => 100,
601 + 'selectors' => [
602 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1' => 'width: {{SIZE}}%;'
603 + ],
604 + 'condition' => [
605 + 'kng_card_carousel_cards_image_container_width_type' => 'custom'
606 + ],
607 + ]
608 + );
609 +
610 + $this->add_responsive_control(
611 + 'kng_card_carousel_cards_image_container_height_type',
612 + [
613 + 'label' => esc_html__('Height', 'king-addons'),
614 + 'type' => Controls_Manager::SELECT,
615 + 'options' => [
616 + 'auto' => esc_html__('Auto', 'king-addons'),
617 + 'custom' => esc_html__('Custom (%)', 'king-addons'),
618 + ],
619 + 'default' => 'auto',
620 + 'selectors' => [
621 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1, {{WRAPPER}} .king-addons-card-carousel-image' => 'height: {{VALUE}};',
622 + ],
623 + ]
624 + );
625 +
626 + $this->add_responsive_control(
627 + 'kng_card_carousel_cards_image_container_height',
628 + [
629 + 'label' => esc_html__('Custom height (%)', 'king-addons'),
630 + 'type' => Controls_Manager::NUMBER,
631 + 'min' => 0,
632 + 'step' => 1,
633 + 'max' => 100,
634 + 'default' => 100,
635 + 'selectors' => [
636 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1, {{WRAPPER}} .king-addons-card-carousel-image' => 'height: {{SIZE}}%;'
637 + ],
638 + 'condition' => [
639 + 'kng_card_carousel_cards_image_container_height_type' => 'custom'
640 + ],
641 + ]
642 + );
643 +
644 + $this->add_responsive_control(
645 + 'kng_card_carousel_cards_image_container_align_content',
646 + [
647 + 'label' => esc_html__('Align Content', 'king-addons'),
648 + 'type' => Controls_Manager::SELECT,
649 + 'options' => [
650 + 'unset' => esc_html__('Default', 'king-addons'),
651 + 'start' => esc_html__('Start', 'king-addons'),
652 + 'center' => esc_html__('Center', 'king-addons'),
653 + 'end' => esc_html__('End', 'king-addons'),
654 + ],
655 + 'default' => 'unset',
656 + 'selectors' => [
657 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1' => 'justify-content: {{VALUE}}; align-items: {{VALUE}}; align-self: {{VALUE}};'
658 + ],
659 + ]
660 + );
661 +
662 + $this->add_control(
663 + 'kng_card_carousel_cards_text_container_title',
664 + [
665 + 'label' => '<b>' . esc_html__('Text Container', 'king-addons') . '</b>' .
666 + '<div class="elementor-control-field-description">' .
667 + esc_html__('Text container includes title, subtitle, description and button.', 'king-addons') .
668 + '</div>',
669 + 'type' => Controls_Manager::RAW_HTML,
670 + 'separator' => 'before',
671 + ]
672 + );
673 +
674 + $this->add_responsive_control(
675 + 'kng_card_carousel_cards_text_container_width_type',
676 + [
677 + 'label' => esc_html__('Width', 'king-addons'),
678 + 'type' => Controls_Manager::SELECT,
679 + 'options' => [
680 + 'auto' => esc_html__('Auto', 'king-addons'),
681 + 'custom' => esc_html__('Custom (%)', 'king-addons'),
682 + ],
683 + 'default' => 'custom',
684 + ]
685 + );
686 +
687 + $this->add_responsive_control(
688 + 'kng_card_carousel_cards_text_container_width',
689 + [
690 + 'label' => esc_html__('Custom width (%)', 'king-addons'),
691 + 'type' => Controls_Manager::NUMBER,
692 + 'min' => 0,
693 + 'step' => 1,
694 + 'max' => 100,
695 + 'default' => 100,
696 + 'selectors' => [
697 + '{{WRAPPER}} .king-addons-card-carousel-card-container-2' => 'width: {{SIZE}}%;'
698 + ],
699 + 'condition' => [
700 + 'kng_card_carousel_cards_text_container_width_type' => 'custom'
701 + ],
702 + ]
703 + );
704 +
705 + $this->add_responsive_control(
706 + 'kng_card_carousel_cards_text_container_align_content',
707 + [
708 + 'label' => esc_html__('Align Content', 'king-addons'),
709 + 'type' => Controls_Manager::SELECT,
710 + 'options' => [
711 + 'unset' => esc_html__('Default', 'king-addons'),
712 + 'start' => esc_html__('Start', 'king-addons'),
713 + 'center' => esc_html__('Center', 'king-addons'),
714 + 'end' => esc_html__('End', 'king-addons'),
715 + ],
716 + 'default' => 'unset',
717 + 'selectors' => [
718 + '{{WRAPPER}} .king-addons-card-carousel-card-container-2' => 'justify-content: {{VALUE}}; align-items: {{VALUE}}; align-self: {{VALUE}};'
719 + ],
720 + ]
721 + );
722 +
723 + $this->end_controls_section();
724 + /** END SECTION: Card Layout ===================== */
725 +
726 + /** SECTION: Responsive Settings */
727 + $this->start_controls_section(
728 + 'kng_card_carousel_content_section_responsive_settings',
729 + [
730 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Responsive Settings', 'king-addons'),
731 + 'tab' => Controls_Manager::TAB_CONTENT,
732 + ]
733 + );
734 +
735 + $this->add_control(
736 + 'kng_card_carousel_desktop_title',
737 + [
738 + 'label' => '<b>' . esc_html__('Desktop', 'king-addons') . '</b>',
739 + 'type' => Controls_Manager::RAW_HTML,
740 + ]
741 + );
742 +
743 + $this->add_control(
744 + 'kng_card_carousel_desktop_cards_per_view',
745 + [
746 + 'label' => esc_html__('Cards per view', 'king-addons'),
747 + 'description' => esc_html__('The number of slides per view can be a fractional number like 4.5, 5.25, 6.45, etc., to indicate that further slides exist.', 'king-addons'),
748 + 'type' => Controls_Manager::NUMBER,
749 + 'min' => 1,
750 + 'step' => 0.1,
751 + 'default' => 4.0,
752 + ]
753 + );
754 +
755 + $this->add_control(
756 + 'kng_card_carousel_desktop_space_between_cards',
757 + [
758 + 'label' => esc_html__('Space between cards (px)', 'king-addons'),
759 + 'type' => Controls_Manager::NUMBER,
760 + 'min' => 0,
761 + 'step' => 1,
762 + 'default' => 30,
763 + 'separator' => 'after',
764 + ]
765 + );
766 +
767 + $this->add_control(
768 + 'kng_card_carousel_tablet_title',
769 + [
770 + 'label' => '<b>' . esc_html__('Tablet', 'king-addons') . '</b>',
771 + 'type' => Controls_Manager::RAW_HTML,
772 + ]
773 + );
774 +
775 + $this->add_control(
776 + 'kng_card_carousel_tablet_cards_per_view',
777 + [
778 + 'label' => esc_html__('Cards per view', 'king-addons'),
779 + 'type' => Controls_Manager::NUMBER,
780 + 'min' => 1,
781 + 'step' => 0.1,
782 + 'default' => 3.0,
783 + ]
784 + );
785 +
786 + $this->add_control(
787 + 'kng_card_carousel_tablet_space_between_cards',
788 + [
789 + 'label' => esc_html__('Space between cards (px)', 'king-addons'),
790 + 'type' => Controls_Manager::NUMBER,
791 + 'min' => 0,
792 + 'step' => 1,
793 + 'default' => 30,
794 + 'separator' => 'after',
795 + ]
796 + );
797 +
798 + $this->add_control(
799 + 'kng_card_carousel_tablet_breakpoint',
800 + [
801 + 'label' => esc_html__('Breakpoint (px)', 'king-addons'),
802 + 'type' => Controls_Manager::NUMBER,
803 + 'min' => 1,
804 + 'step' => 1,
805 + 'default' => 1024,
806 + ]
807 + );
808 +
809 + $this->add_control(
810 + 'kng_card_carousel_mobile_title',
811 + [
812 + 'label' => '<b>' . esc_html__('Mobile', 'king-addons') . '</b>',
813 + 'type' => Controls_Manager::RAW_HTML,
814 + ]
815 + );
816 +
817 + $this->add_control(
818 + 'kng_card_carousel_mobile_cards_per_view',
819 + [
820 + 'label' => esc_html__('Cards per view', 'king-addons'),
821 + 'type' => Controls_Manager::NUMBER,
822 + 'min' => 1,
823 + 'step' => 0.1,
824 + 'default' => 1.0,
825 + ]
826 + );
827 +
828 + $this->add_control(
829 + 'kng_card_carousel_mobile_space_between_cards',
830 + [
831 + 'label' => esc_html__('Space between cards (px)', 'king-addons'),
832 + 'type' => Controls_Manager::NUMBER,
833 + 'min' => 0,
834 + 'step' => 1,
835 + 'default' => 30,
836 + ]
837 + );
838 +
839 + $this->add_control(
840 + 'kng_card_carousel_mobile_breakpoint',
841 + [
842 + 'label' => esc_html__('Breakpoint (px)', 'king-addons'),
843 + 'type' => Controls_Manager::NUMBER,
844 + 'min' => 1,
845 + 'step' => 1,
846 + 'default' => 767,
847 + ]
848 + );
849 +
850 + $this->end_controls_section();
851 + /** END SECTION: Responsive Settings */
852 +
853 + /** START SECTION: Navigation */
854 + $this->start_controls_section(
855 + 'kng_card_carousel_content_section_nav',
856 + [
857 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation', 'king-addons'),
858 + 'tab' => Controls_Manager::TAB_CONTENT,
859 + ]
860 + );
861 +
862 + $this->add_control(
863 + 'kng_card_carousel_nav_switcher',
864 + [
865 + 'label' => esc_html__('Enable navigation', 'king-addons'),
866 + 'type' => Controls_Manager::SWITCHER,
867 + 'default' => 'yes',
868 + ]
869 + );
870 +
871 + $this->add_responsive_control(
872 + 'kng_card_carousel_nav_display',
873 + [
874 + 'label' => esc_html__('Display on different screen sizes', 'king-addons'),
875 + 'type' => Controls_Manager::SELECT,
876 + 'options' => [
877 + 'flex' => esc_html__('Show', 'king-addons'),
878 + 'none' => esc_html__('Hide', 'king-addons'),
879 + ],
880 + 'desktop_default' => 'flex',
881 + 'tablet_default' => 'none',
882 + 'mobile_default' => 'none',
883 + 'selectors' => [
884 + '{{WRAPPER}} .king-addons-card-carousel-nav' => 'display: {{VALUE}};'
885 + ],
886 + 'condition' => [
887 + 'kng_card_carousel_nav_switcher' => 'yes'
888 + ]
889 + ]
890 + );
891 +
892 + $this->end_controls_section();
893 + /** END SECTION: Navigation */
894 +
895 + /** START SECTION: Pagination */
896 + $this->start_controls_section(
897 + 'kng_card_carousel_content_section_pag',
898 + [
899 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
900 + 'tab' => Controls_Manager::TAB_CONTENT,
901 + ]
902 + );
903 +
904 + $this->add_control(
905 + 'kng_card_carousel_pag_switcher',
906 + [
907 + 'label' => esc_html__('Enable pagination', 'king-addons'),
908 + 'type' => Controls_Manager::SWITCHER,
909 + 'default' => 'yes',
910 + ]
911 + );
912 +
913 + $this->add_control(
914 + 'kng_card_carousel_pag_type',
915 + [
916 + 'label' => esc_html__('Type', 'king-addons'),
917 + 'type' => Controls_Manager::SELECT,
918 + 'options' => [
919 + 'bullets' => esc_html__('Bullets', 'king-addons'),
920 + 'progressbar' => esc_html__('Progress Bar', 'king-addons'),
921 + 'fraction' => esc_html__('Fraction', 'king-addons'),
922 + ],
923 + 'default' => 'bullets',
924 + 'condition' => [
925 + 'kng_card_carousel_pag_switcher' => 'yes'
926 + ]
927 + ]
928 + );
929 +
930 + // position top / bottom
931 + $this->add_responsive_control(
932 + 'kng_card_carousel_pag_progressbar_position',
933 + [
934 + 'label' => esc_html__('Progress bar position', 'king-addons'),
935 + 'description' => esc_html__('Check margin settings to properly set the position of the progress bar.', 'king-addons'),
936 + 'type' => Controls_Manager::SELECT,
937 + 'options' => [
938 + '0' => esc_html__('Top', 'king-addons'),
939 + 'unset' => esc_html__('Bottom', 'king-addons'),
940 + ],
941 + 'default' => 'unset',
942 + 'selectors' => [
943 + '{{WRAPPER}} .king-addons-card-carousel-pagination' => 'top: {{VALUE}}; bottom: 0;'
944 + ],
945 + 'condition' => [
946 + 'kng_card_carousel_pag_type' => 'progressbar',
947 + ]
948 + ]
949 + );
950 +
951 + $this->add_control(
952 + 'kng_card_carousel_pag_clickable_switcher',
953 + [
954 + 'label' => esc_html__('Clickable Bullets', 'king-addons'),
955 + 'type' => Controls_Manager::SWITCHER,
956 + 'default' => 'yes',
957 + 'condition' => [
958 + 'kng_card_carousel_pag_type' => 'bullets',
959 + ]
960 + ]
961 + );
962 +
963 + $this->add_control(
964 + 'kng_card_carousel_pag_dynamic_switcher',
965 + [
966 + 'label' => esc_html__('Dynamic Bullets', 'king-addons'),
967 + 'description' => esc_html__('Good to enable if you use bullets pagination with a lot of cards. So it will keep only few bullets visible at the same time.', 'king-addons'),
968 + 'type' => Controls_Manager::SWITCHER,
969 + 'default' => '',
970 + 'condition' => [
971 + 'kng_card_carousel_pag_type' => 'bullets',
972 + ]
973 + ]
974 + );
975 +
976 + $this->add_control(
977 + 'kng_card_carousel_pag_dynamic_number',
978 + [
979 + 'label' => esc_html__('Number of Dynamic Bullets', 'king-addons'),
980 + 'description' => esc_html__('The number of main bullets visible when Dynamic Bullets enabled.', 'king-addons'),
981 + 'type' => Controls_Manager::NUMBER,
982 + 'min' => 1,
983 + 'step' => 1,
984 + 'default' => 1,
985 + 'condition' => [
986 + 'kng_card_carousel_pag_dynamic_switcher' => 'yes',
987 + 'kng_card_carousel_pag_type' => 'bullets',
988 + ]
989 + ]
990 + );
991 +
992 + $this->add_responsive_control(
993 + 'kng_card_carousel_pag_display',
994 + [
995 + 'label' => esc_html__('Display on different screen sizes', 'king-addons'),
996 + 'type' => Controls_Manager::SELECT,
997 + 'options' => [
998 + 'block' => esc_html__('Show', 'king-addons'),
999 + 'none' => esc_html__('Hide', 'king-addons'),
1000 + ],
1001 + 'desktop_default' => 'block',
1002 + 'tablet_default' => 'block',
1003 + 'mobile_default' => 'block',
1004 + 'selectors' => [
1005 + '{{WRAPPER}} .king-addons-card-carousel-pagination' => 'display: {{VALUE}};'
1006 + ],
1007 + 'condition' => [
1008 + 'kng_card_carousel_pag_switcher' => 'yes'
1009 + ]
1010 + ]
1011 + );
1012 +
1013 + $this->end_controls_section();
1014 + /** END SECTION: Pagination */
1015 +
1016 + /** END TAB: CONTENT ===================== */
1017 +
1018 + /** START TAB: STYLE ===================== */
1019 + $this->start_controls_section(
1020 + 'kng_card_carousel_style_section_image',
1021 + [
1022 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image', 'king-addons'),
1023 + 'tab' => Controls_Manager::TAB_STYLE,
1024 + ]
1025 + );
1026 +
1027 + $this->add_responsive_control(
1028 + 'kng_card_carousel_image_height_type',
1029 + [
1030 + 'label' => esc_html__('Height', 'king-addons'),
1031 + 'type' => Controls_Manager::SELECT,
1032 + 'options' => [
1033 + 'auto' => esc_html__('Auto', 'king-addons'),
1034 + 'custom-px' => esc_html__('Custom (px)', 'king-addons'),
1035 + 'custom-pct' => esc_html__('Custom (%)', 'king-addons'),
1036 + ],
1037 + 'default' => 'custom-px',
1038 + ]
1039 + );
1040 +
1041 + $this->add_responsive_control(
1042 + 'kng_card_carousel_image_width_type',
1043 + [
1044 + 'label' => esc_html__('Width', 'king-addons'),
1045 + 'type' => Controls_Manager::SELECT,
1046 + 'options' => [
1047 + 'auto' => esc_html__('Auto', 'king-addons'),
1048 + 'custom-pct' => esc_html__('Width (%)', 'king-addons'),
1049 + 'custom-px' => esc_html__('Maximum Width (px)', 'king-addons'),
1050 + ],
1051 + 'default' => 'auto',
1052 + ]
1053 + );
1054 +
1055 + $this->add_responsive_control(
1056 + 'kng_card_carousel_image_width_px',
1057 + [
1058 + 'label' => esc_html__('Maximum Width (px)', 'king-addons'),
1059 + 'type' => Controls_Manager::NUMBER,
1060 + 'min' => 0,
1061 + 'step' => 1,
1062 + 'default' => 200,
1063 + 'selectors' => [
1064 + '{{WRAPPER}} .king-addons-card-carousel-image img' => 'max-width: {{SIZE}}px;'
1065 + ],
1066 + 'condition' => [
1067 + 'kng_card_carousel_image_width_type' => 'custom-px'
1068 + ]
1069 + ]
1070 + );
1071 +
1072 + $this->add_responsive_control(
1073 + 'kng_card_carousel_image_width_pct',
1074 + [
1075 + 'label' => esc_html__('Width (%)', 'king-addons'),
1076 + 'type' => Controls_Manager::NUMBER,
1077 + 'min' => 0,
1078 + 'max' => 100,
1079 + 'step' => 1,
1080 + 'default' => 100,
1081 + 'selectors' => [
1082 + '{{WRAPPER}} .king-addons-card-carousel-image img' => 'width: {{SIZE}}%;'
1083 + ],
1084 + 'condition' => [
1085 + 'kng_card_carousel_image_width_type' => 'custom-pct'
1086 + ]
1087 + ]
1088 + );
1089 +
1090 + $this->add_responsive_control(
1091 + 'kng_card_carousel_image_height_px',
1092 + [
1093 + 'label' => esc_html__('Height (px)', 'king-addons'),
1094 + 'type' => Controls_Manager::NUMBER,
1095 + 'min' => 0,
1096 + 'step' => 1,
1097 + 'default' => 200,
1098 + 'selectors' => [
1099 + '{{WRAPPER}} .king-addons-card-carousel-image img' => 'height: {{SIZE}}px;'
1100 + ],
1101 + 'condition' => [
1102 + 'kng_card_carousel_image_height_type' => 'custom-px'
1103 + ]
1104 + ]
1105 + );
1106 +
1107 + $this->add_responsive_control(
1108 + 'kng_card_carousel_image_height_pct',
1109 + [
1110 + 'label' => esc_html__('Height (%)', 'king-addons'),
1111 + 'type' => Controls_Manager::NUMBER,
1112 + 'min' => 0,
1113 + 'step' => 1,
1114 + 'default' => 100,
1115 + 'selectors' => [
1116 + '{{WRAPPER}} .king-addons-card-carousel-image img' => 'height: {{SIZE}}%;'
1117 + ],
1118 + 'condition' => [
1119 + 'kng_card_carousel_image_height_type' => 'custom-pct'
1120 + ]
1121 + ]
1122 + );
1123 +
1124 + $this->add_responsive_control(
1125 + 'kng_card_carousel_image_fit',
1126 + [
1127 + 'label' => esc_html__('Image Fit', 'king-addons'),
1128 + 'type' => Controls_Manager::SELECT,
1129 + 'options' => [
1130 + 'cover' => esc_html__('Cover', 'king-addons'),
1131 + 'contain' => esc_html__('Contain', 'king-addons'),
1132 + ],
1133 + 'default' => 'cover',
1134 + 'selectors' => [
1135 + '{{WRAPPER}} .king-addons-card-carousel-image img' => 'object-fit: {{VALUE}};',
1136 + ],
1137 + ]
1138 + );
1139 +
1140 + $this->add_responsive_control(
1141 + 'kng_card_carousel_image_fit_position',
1142 + [
1143 + 'label' => esc_html__('Image Fit Position', 'king-addons'),
1144 + 'type' => Controls_Manager::SELECT,
1145 + 'options' => [
1146 + 'top' => esc_html__('Top', 'king-addons'),
1147 + 'bottom' => esc_html__('Bottom', 'king-addons'),
1148 + 'left' => esc_html__('Left', 'king-addons'),
1149 + 'right' => esc_html__('Right', 'king-addons'),
1150 + 'center' => esc_html__('Center', 'king-addons'),
1151 + ],
1152 + 'default' => 'center',
1153 + 'selectors' => [
1154 + '{{WRAPPER}} .king-addons-card-carousel-image img' => 'object-position: {{VALUE}};',
1155 + ],
1156 + 'condition' => [
1157 + 'kng_card_carousel_image_fit' => 'cover'
1158 + ]
1159 + ]
1160 + );
1161 +
1162 + $this->add_control(
1163 + 'kng_card_carousel_image_bg_color',
1164 + [
1165 + 'label' => esc_html__('Background Color', 'king-addons'),
1166 + 'type' => Controls_Manager::COLOR,
1167 + 'default' => '',
1168 + 'selectors' => [
1169 + '{{WRAPPER}} .king-addons-card-carousel-image' => 'background-color: {{VALUE}}',
1170 + ],
1171 + 'separator' => 'before',
1172 + ]
1173 + );
1174 +
1175 + $this->add_group_control(
1176 + Group_Control_Css_Filter::get_type(),
1177 + [
1178 + 'label' => esc_html__('CSS Filter', 'king-addons'),
1179 + 'name' => 'kng_card_carousel_image_css_filters',
1180 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-image img',
1181 + ]
1182 + );
1183 +
1184 + $this->add_group_control(
1185 + Group_Control_Css_Filter::get_type(),
1186 + [
1187 + 'label' => esc_html__('CSS Filter for image on card hover', 'king-addons'),
1188 + 'name' => 'kng_card_carousel_image_css_filters_hover',
1189 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card:hover .king-addons-card-carousel-image img',
1190 + ]
1191 + );
1192 +
1193 + $this->add_responsive_control(
1194 + 'kng_card_carousel_image_transition',
1195 + [
1196 + 'label' => esc_html__('Transition duration on hover (ms)', 'king-addons'),
1197 + 'type' => Controls_Manager::NUMBER,
1198 + 'min' => 0,
1199 + 'step' => 10,
1200 + 'default' => 300,
1201 + 'selectors' => [
1202 + '{{WRAPPER}} .king-addons-card-carousel-image img' => 'transition: all {{SIZE}}ms;'
1203 + ],
1204 + ]
1205 + );
1206 +
1207 + $this->add_control(
1208 + 'kng_card_carousel_image_scale_switcher',
1209 + [
1210 + 'label' => esc_html__('Scale image on card hover', 'king-addons'),
1211 + 'type' => Controls_Manager::SWITCHER,
1212 + ]
1213 + );
1214 +
1215 + $this->add_responsive_control(
1216 + 'kng_card_carousel_image_scale_hover',
1217 + [
1218 + 'label' => esc_html__('Scale on hover', 'king-addons'),
1219 + 'type' => Controls_Manager::NUMBER,
1220 + 'min' => 0,
1221 + 'step' => 0.01,
1222 + 'default' => 1.3,
1223 + 'selectors' => [
1224 + '{{WRAPPER}} .king-addons-card-carousel-card:hover .king-addons-card-carousel-image img' => 'transform: scale({{SIZE}});'
1225 + ],
1226 + 'condition' => [
1227 + 'kng_card_carousel_image_scale_switcher' => 'yes',
1228 + ]
1229 + ]
1230 + );
1231 +
1232 + $this->add_responsive_control(
1233 + 'kng_card_carousel_image_padding',
1234 + [
1235 + 'label' => esc_html__('Padding', 'king-addons'),
1236 + 'type' => Controls_Manager::DIMENSIONS,
1237 + 'size_units' => ['px', '%'],
1238 + 'default' => [
1239 + 'top' => 0,
1240 + 'right' => 0,
1241 + 'bottom' => 0,
1242 + 'left' => 0,
1243 + 'unit' => 'px',
1244 + ],
1245 + 'selectors' => [
1246 + '{{WRAPPER}} .king-addons-card-carousel-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1247 + ]
1248 + ]
1249 + );
1250 +
1251 + $this->add_responsive_control(
1252 + 'kng_card_carousel_image_margin',
1253 + [
1254 + 'label' => esc_html__('Margin', 'king-addons'),
1255 + 'type' => Controls_Manager::DIMENSIONS,
1256 + 'size_units' => ['px', '%'],
1257 + 'default' => [
1258 + 'top' => 0,
1259 + 'right' => 0,
1260 + 'bottom' => 0,
1261 + 'left' => 0,
1262 + 'unit' => 'px',
1263 + ],
1264 + 'selectors' => [
1265 + '{{WRAPPER}} .king-addons-card-carousel-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1266 + ]
1267 + ]
1268 + );
1269 +
1270 + $this->add_group_control(
1271 + Group_Control_Box_Shadow::get_type(),
1272 + [
1273 + 'name' => 'kng_card_carousel_image_box_shadow',
1274 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-image',
1275 + ]
1276 + );
1277 +
1278 + $this->add_group_control(
1279 + Group_Control_Border::get_type(),
1280 + [
1281 + 'name' => 'kng_card_carousel_image_border',
1282 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-image',
1283 + 'fields_options' => [
1284 + 'border' => [
1285 + 'default' => 'none',
1286 + ],
1287 + ],
1288 + ]
1289 + );
1290 +
1291 + $this->add_responsive_control(
1292 + 'kng_card_carousel_image_border_radius',
1293 + [
1294 + 'label' => esc_html__('Border Radius', 'king-addons'),
1295 + 'type' => Controls_Manager::DIMENSIONS,
1296 + 'size_units' => ['px', '%'],
1297 + 'default' => [
1298 + 'top' => 0,
1299 + 'right' => 0,
1300 + 'bottom' => 0,
1301 + 'left' => 0,
1302 + 'unit' => 'px',
1303 + ],
1304 + 'selectors' => [
1305 + '{{WRAPPER}} .king-addons-card-carousel-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1306 + ]
1307 + ]
1308 + );
1309 +
1310 + $this->end_controls_section();
1311 +
1312 + $this->start_controls_section(
1313 + 'kng_card_carousel_style_section_imagedescription',
1314 + [
1315 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image Description', 'king-addons'),
1316 + 'tab' => Controls_Manager::TAB_STYLE
1317 + ]
1318 + );
1319 +
1320 + $this->add_group_control(
1321 + Group_Control_Typography::get_type(),
1322 + [
1323 + 'name' => 'kng_card_carousel_imagedescription_typography',
1324 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-imagedescription',
1325 + ]
1326 + );
1327 +
1328 + $this->add_control(
1329 + 'kng_card_carousel_imagedescription_txt_color',
1330 + [
1331 + 'label' => esc_html__('Text Color', 'king-addons'),
1332 + 'type' => Controls_Manager::COLOR,
1333 + 'default' => '',
1334 + 'selectors' => [
1335 + '{{WRAPPER}} .king-addons-card-carousel-imagedescription' => 'color: {{VALUE}}'
1336 + ],
1337 + ]
1338 + );
1339 +
1340 + $this->add_control(
1341 + 'kng_card_carousel_imagedescription_bg_color',
1342 + [
1343 + 'label' => esc_html__('Background Color', 'king-addons'),
1344 + 'type' => Controls_Manager::COLOR,
1345 + 'default' => '',
1346 + 'selectors' => [
1347 + '{{WRAPPER}} .king-addons-card-carousel-imagedescription' => 'background-color: {{VALUE}}',
1348 + ],
1349 + ]
1350 + );
1351 +
1352 + $this->add_control(
1353 + 'kng_card_carousel_imagedescription_txt_align',
1354 + [
1355 + 'label' => esc_html__('Text Align', 'king-addons'),
1356 + 'type' => Controls_Manager::CHOOSE,
1357 + 'default' => 'center',
1358 + 'options' => [
1359 + 'left' => [
1360 + 'title' => esc_html__('Left', 'king-addons'),
1361 + 'icon' => 'eicon-h-align-left',
1362 + ],
1363 + 'center' => [
1364 + 'title' => esc_html__('Center', 'king-addons'),
1365 + 'icon' => 'eicon-h-align-center',
1366 + ],
1367 + 'right' => [
1368 + 'title' => esc_html__('Right', 'king-addons'),
1369 + 'icon' => 'eicon-h-align-right',
1370 + ],
1371 + ],
1372 + 'selectors' => [
1373 + '{{WRAPPER}} .king-addons-card-carousel-imagedescription' => 'text-align: {{VALUE}};',
1374 + ]
1375 + ]
1376 + );
1377 +
1378 + $this->add_responsive_control(
1379 + 'kng_card_carousel_imagedescription_padding',
1380 + [
1381 + 'label' => esc_html__('Padding', 'king-addons'),
1382 + 'type' => Controls_Manager::DIMENSIONS,
1383 + 'size_units' => ['px', '%'],
1384 + 'default' => [
1385 + 'top' => 10,
1386 + 'right' => 10,
1387 + 'bottom' => 10,
1388 + 'left' => 10,
1389 + 'unit' => 'px',
1390 + ],
1391 + 'selectors' => [
1392 + '{{WRAPPER}} .king-addons-card-carousel-imagedescription' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1393 + ]
1394 + ]
1395 + );
1396 +
1397 + $this->add_responsive_control(
1398 + 'kng_card_carousel_imagedescription_margin',
1399 + [
1400 + 'label' => esc_html__('Margin', 'king-addons'),
1401 + 'type' => Controls_Manager::DIMENSIONS,
1402 + 'size_units' => ['px', '%'],
1403 + 'default' => [
1404 + 'top' => 0,
1405 + 'right' => 0,
1406 + 'bottom' => 0,
1407 + 'left' => 0,
1408 + 'unit' => 'px',
1409 + ],
1410 + 'selectors' => [
1411 + '{{WRAPPER}} .king-addons-card-carousel-imagedescription' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1412 + ]
1413 + ]
1414 + );
1415 +
1416 + $this->add_group_control(
1417 + Group_Control_Box_Shadow::get_type(),
1418 + [
1419 + 'name' => 'kng_card_carousel_imagedescription_box_shadow',
1420 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-imagedescription',
1421 + ]
1422 + );
1423 +
1424 + $this->add_group_control(
1425 + Group_Control_Border::get_type(),
1426 + [
1427 + 'name' => 'kng_card_carousel_imagedescription_border',
1428 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-imagedescription',
1429 + 'fields_options' => [
1430 + 'border' => [
1431 + 'default' => 'none',
1432 + ],
1433 + ],
1434 + ]
1435 + );
1436 +
1437 + $this->add_responsive_control(
1438 + 'kng_card_carousel_imagedescription_border_radius',
1439 + [
1440 + 'label' => esc_html__('Border Radius', 'king-addons'),
1441 + 'type' => Controls_Manager::DIMENSIONS,
1442 + 'size_units' => ['px', '%'],
1443 + 'default' => [
1444 + 'top' => 0,
1445 + 'right' => 0,
1446 + 'bottom' => 0,
1447 + 'left' => 0,
1448 + 'unit' => 'px',
1449 + ],
1450 + 'selectors' => [
1451 + '{{WRAPPER}} .king-addons-card-carousel-imagedescription' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1452 + ]
1453 + ]
1454 + );
1455 +
1456 + $this->end_controls_section();
1457 +
1458 + $this->start_controls_section(
1459 + 'kng_card_carousel_style_section_title',
1460 + [
1461 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
1462 + 'tab' => Controls_Manager::TAB_STYLE,
1463 + ]
1464 + );
1465 +
1466 + $this->add_group_control(
1467 + Group_Control_Typography::get_type(),
1468 + [
1469 + 'name' => 'kng_card_carousel_title_typography',
1470 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-title',
1471 + ]
1472 + );
1473 +
1474 + $this->add_control(
1475 + 'kng_card_carousel_title_txt_color',
1476 + [
1477 + 'label' => esc_html__('Text Color', 'king-addons'),
1478 + 'type' => Controls_Manager::COLOR,
1479 + 'default' => '',
1480 + 'selectors' => [
1481 + '{{WRAPPER}} .king-addons-card-carousel-title' => 'color: {{VALUE}}'
1482 + ],
1483 + ]
1484 + );
1485 +
1486 + $this->add_control(
1487 + 'kng_card_carousel_title_bg_color',
1488 + [
1489 + 'label' => esc_html__('Background Color', 'king-addons'),
1490 + 'type' => Controls_Manager::COLOR,
1491 + 'default' => '',
1492 + 'selectors' => [
1493 + '{{WRAPPER}} .king-addons-card-carousel-title' => 'background-color: {{VALUE}}',
1494 + ],
1495 + ]
1496 + );
1497 +
1498 + $this->add_control(
1499 + 'kng_card_carousel_title_txt_align',
1500 + [
1501 + 'label' => esc_html__('Text Align', 'king-addons'),
1502 + 'type' => Controls_Manager::CHOOSE,
1503 + 'default' => 'center',
1504 + 'options' => [
1505 + 'left' => [
1506 + 'title' => esc_html__('Left', 'king-addons'),
1507 + 'icon' => 'eicon-h-align-left',
1508 + ],
1509 + 'center' => [
1510 + 'title' => esc_html__('Center', 'king-addons'),
1511 + 'icon' => 'eicon-h-align-center',
1512 + ],
1513 + 'right' => [
1514 + 'title' => esc_html__('Right', 'king-addons'),
1515 + 'icon' => 'eicon-h-align-right',
1516 + ],
1517 + ],
1518 + 'selectors' => [
1519 + '{{WRAPPER}} .king-addons-card-carousel-title' => 'text-align: {{VALUE}};',
1520 + ]
1521 + ]
1522 + );
1523 +
1524 + $this->add_responsive_control(
1525 + 'kng_card_carousel_title_padding',
1526 + [
1527 + 'label' => esc_html__('Padding', 'king-addons'),
1528 + 'type' => Controls_Manager::DIMENSIONS,
1529 + 'size_units' => ['px', '%'],
1530 + 'default' => [
1531 + 'top' => 10,
1532 + 'right' => 10,
1533 + 'bottom' => 10,
1534 + 'left' => 10,
1535 + 'unit' => 'px',
1536 + ],
1537 + 'selectors' => [
1538 + '{{WRAPPER}} .king-addons-card-carousel-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1539 + ]
1540 + ]
1541 + );
1542 +
1543 + $this->add_responsive_control(
1544 + 'kng_card_carousel_title_margin',
1545 + [
1546 + 'label' => esc_html__('Margin', 'king-addons'),
1547 + 'type' => Controls_Manager::DIMENSIONS,
1548 + 'size_units' => ['px', '%'],
1549 + 'default' => [
1550 + 'top' => 0,
1551 + 'right' => 0,
1552 + 'bottom' => 0,
1553 + 'left' => 0,
1554 + 'unit' => 'px',
1555 + ],
1556 + 'selectors' => [
1557 + '{{WRAPPER}} .king-addons-card-carousel-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1558 + ]
1559 + ]
1560 + );
1561 +
1562 + $this->add_group_control(
1563 + Group_Control_Box_Shadow::get_type(),
1564 + [
1565 + 'name' => 'kng_card_carousel_title_box_shadow',
1566 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-title',
1567 + ]
1568 + );
1569 +
1570 + $this->add_group_control(
1571 + Group_Control_Border::get_type(),
1572 + [
1573 + 'name' => 'kng_card_carousel_title_border',
1574 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-title',
1575 + 'fields_options' => [
1576 + 'border' => [
1577 + 'default' => 'none',
1578 + ],
1579 + ],
1580 + ]
1581 + );
1582 +
1583 + $this->add_responsive_control(
1584 + 'kng_card_carousel_title_border_radius',
1585 + [
1586 + 'label' => esc_html__('Border Radius', 'king-addons'),
1587 + 'type' => Controls_Manager::DIMENSIONS,
1588 + 'size_units' => ['px', '%'],
1589 + 'default' => [
1590 + 'top' => 0,
1591 + 'right' => 0,
1592 + 'bottom' => 0,
1593 + 'left' => 0,
1594 + 'unit' => 'px',
1595 + ],
1596 + 'selectors' => [
1597 + '{{WRAPPER}} .king-addons-card-carousel-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1598 + ]
1599 + ]
1600 + );
1601 +
1602 + $this->end_controls_section();
1603 +
1604 + $this->start_controls_section(
1605 + 'kng_card_carousel_style_section_subtitle',
1606 + [
1607 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Subtitle', 'king-addons'),
1608 + 'tab' => Controls_Manager::TAB_STYLE,
1609 + ]
1610 + );
1611 +
1612 + $this->add_group_control(
1613 + Group_Control_Typography::get_type(),
1614 + [
1615 + 'name' => 'kng_card_carousel_subtitle_typography',
1616 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-subtitle',
1617 + ]
1618 + );
1619 +
1620 + $this->add_control(
1621 + 'kng_card_carousel_subtitle_txt_color',
1622 + [
1623 + 'label' => esc_html__('Text Color', 'king-addons'),
1624 + 'type' => Controls_Manager::COLOR,
1625 + 'default' => '',
1626 + 'selectors' => [
1627 + '{{WRAPPER}} .king-addons-card-carousel-subtitle' => 'color: {{VALUE}}'
1628 + ],
1629 + ]
1630 + );
1631 +
1632 + $this->add_control(
1633 + 'kng_card_carousel_subtitle_bg_color',
1634 + [
1635 + 'label' => esc_html__('Background Color', 'king-addons'),
1636 + 'type' => Controls_Manager::COLOR,
1637 + 'default' => '',
1638 + 'selectors' => [
1639 + '{{WRAPPER}} .king-addons-card-carousel-subtitle' => 'background-color: {{VALUE}}',
1640 + ],
1641 + ]
1642 + );
1643 +
1644 + $this->add_control(
1645 + 'kng_card_carousel_subtitle_txt_align',
1646 + [
1647 + 'label' => esc_html__('Text Align', 'king-addons'),
1648 + 'type' => Controls_Manager::CHOOSE,
1649 + 'default' => 'center',
1650 + 'options' => [
1651 + 'left' => [
1652 + 'title' => esc_html__('Left', 'king-addons'),
1653 + 'icon' => 'eicon-h-align-left',
1654 + ],
1655 + 'center' => [
1656 + 'title' => esc_html__('Center', 'king-addons'),
1657 + 'icon' => 'eicon-h-align-center',
1658 + ],
1659 + 'right' => [
1660 + 'title' => esc_html__('Right', 'king-addons'),
1661 + 'icon' => 'eicon-h-align-right',
1662 + ],
1663 + ],
1664 + 'selectors' => [
1665 + '{{WRAPPER}} .king-addons-card-carousel-subtitle' => 'text-align: {{VALUE}};',
1666 + ]
1667 + ]
1668 + );
1669 +
1670 + $this->add_responsive_control(
1671 + 'kng_card_carousel_subtitle_padding',
1672 + [
1673 + 'label' => esc_html__('Padding', 'king-addons'),
1674 + 'type' => Controls_Manager::DIMENSIONS,
1675 + 'size_units' => ['px', '%'],
1676 + 'default' => [
1677 + 'top' => 10,
1678 + 'right' => 10,
1679 + 'bottom' => 10,
1680 + 'left' => 10,
1681 + 'unit' => 'px',
1682 + ],
1683 + 'selectors' => [
1684 + '{{WRAPPER}} .king-addons-card-carousel-subtitle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1685 + ]
1686 + ]
1687 + );
1688 +
1689 + $this->add_responsive_control(
1690 + 'kng_card_carousel_subtitle_margin',
1691 + [
1692 + 'label' => esc_html__('Margin', 'king-addons'),
1693 + 'type' => Controls_Manager::DIMENSIONS,
1694 + 'size_units' => ['px', '%'],
1695 + 'default' => [
1696 + 'top' => 0,
1697 + 'right' => 0,
1698 + 'bottom' => 0,
1699 + 'left' => 0,
1700 + 'unit' => 'px',
1701 + ],
1702 + 'selectors' => [
1703 + '{{WRAPPER}} .king-addons-card-carousel-subtitle' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1704 + ]
1705 + ]
1706 + );
1707 +
1708 + $this->add_group_control(
1709 + Group_Control_Box_Shadow::get_type(),
1710 + [
1711 + 'name' => 'kng_card_carousel_subtitle_box_shadow',
1712 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-subtitle',
1713 + ]
1714 + );
1715 +
1716 + $this->add_group_control(
1717 + Group_Control_Border::get_type(),
1718 + [
1719 + 'name' => 'kng_card_carousel_subtitle_border',
1720 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-subtitle',
1721 + 'fields_options' => [
1722 + 'border' => [
1723 + 'default' => 'none',
1724 + ],
1725 + ],
1726 + ]
1727 + );
1728 +
1729 + $this->add_responsive_control(
1730 + 'kng_card_carousel_subtitle_border_radius',
1731 + [
1732 + 'label' => esc_html__('Border Radius', 'king-addons'),
1733 + 'type' => Controls_Manager::DIMENSIONS,
1734 + 'size_units' => ['px', '%'],
1735 + 'default' => [
1736 + 'top' => 0,
1737 + 'right' => 0,
1738 + 'bottom' => 0,
1739 + 'left' => 0,
1740 + 'unit' => 'px',
1741 + ],
1742 + 'selectors' => [
1743 + '{{WRAPPER}} .king-addons-card-carousel-subtitle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1744 + ]
1745 + ]
1746 + );
1747 +
1748 + $this->end_controls_section();
1749 +
1750 + $this->start_controls_section(
1751 + 'kng_card_carousel_style_section_description',
1752 + [
1753 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Description', 'king-addons'),
1754 + 'tab' => Controls_Manager::TAB_STYLE,
1755 + ]
1756 + );
1757 +
1758 + $this->add_group_control(
1759 + Group_Control_Typography::get_type(),
1760 + [
1761 + 'name' => 'kng_card_carousel_description_typography',
1762 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-description',
1763 + ]
1764 + );
1765 +
1766 + $this->add_control(
1767 + 'kng_card_carousel_description_txt_color',
1768 + [
1769 + 'label' => esc_html__('Text Color', 'king-addons'),
1770 + 'type' => Controls_Manager::COLOR,
1771 + 'default' => '',
1772 + 'selectors' => [
1773 + '{{WRAPPER}} .king-addons-card-carousel-description' => 'color: {{VALUE}}'
1774 + ],
1775 + ]
1776 + );
1777 +
1778 + $this->add_control(
1779 + 'kng_card_carousel_description_bg_color',
1780 + [
1781 + 'label' => esc_html__('Background Color', 'king-addons'),
1782 + 'type' => Controls_Manager::COLOR,
1783 + 'default' => '',
1784 + 'selectors' => [
1785 + '{{WRAPPER}} .king-addons-card-carousel-description' => 'background-color: {{VALUE}}',
1786 + ],
1787 + ]
1788 + );
1789 +
1790 + $this->add_control(
1791 + 'kng_card_carousel_description_txt_align',
1792 + [
1793 + 'label' => esc_html__('Text Align', 'king-addons'),
1794 + 'type' => Controls_Manager::CHOOSE,
1795 + 'default' => 'center',
1796 + 'options' => [
1797 + 'left' => [
1798 + 'title' => esc_html__('Left', 'king-addons'),
1799 + 'icon' => 'eicon-h-align-left',
1800 + ],
1801 + 'center' => [
1802 + 'title' => esc_html__('Center', 'king-addons'),
1803 + 'icon' => 'eicon-h-align-center',
1804 + ],
1805 + 'right' => [
1806 + 'title' => esc_html__('Right', 'king-addons'),
1807 + 'icon' => 'eicon-h-align-right',
1808 + ],
1809 + ],
1810 + 'selectors' => [
1811 + '{{WRAPPER}} .king-addons-card-carousel-description' => 'text-align: {{VALUE}};',
1812 + ]
1813 + ]
1814 + );
1815 +
1816 + $this->add_responsive_control(
1817 + 'kng_card_carousel_description_padding',
1818 + [
1819 + 'label' => esc_html__('Padding', 'king-addons'),
1820 + 'type' => Controls_Manager::DIMENSIONS,
1821 + 'size_units' => ['px', '%'],
1822 + 'default' => [
1823 + 'top' => 10,
1824 + 'right' => 10,
1825 + 'bottom' => 10,
1826 + 'left' => 10,
1827 + 'unit' => 'px',
1828 + ],
1829 + 'selectors' => [
1830 + '{{WRAPPER}} .king-addons-card-carousel-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1831 + ]
1832 + ]
1833 + );
1834 +
1835 + $this->add_responsive_control(
1836 + 'kng_card_carousel_description_margin',
1837 + [
1838 + 'label' => esc_html__('Margin', 'king-addons'),
1839 + 'type' => Controls_Manager::DIMENSIONS,
1840 + 'size_units' => ['px', '%'],
1841 + 'default' => [
1842 + 'top' => 0,
1843 + 'right' => 0,
1844 + 'bottom' => 0,
1845 + 'left' => 0,
1846 + 'unit' => 'px',
1847 + ],
1848 + 'selectors' => [
1849 + '{{WRAPPER}} .king-addons-card-carousel-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1850 + ]
1851 + ]
1852 + );
1853 +
1854 + $this->add_group_control(
1855 + Group_Control_Box_Shadow::get_type(),
1856 + [
1857 + 'name' => 'kng_card_carousel_description_box_shadow',
1858 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-description',
1859 + ]
1860 + );
1861 +
1862 + $this->add_group_control(
1863 + Group_Control_Border::get_type(),
1864 + [
1865 + 'name' => 'kng_card_carousel_description_border',
1866 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-description',
1867 + 'fields_options' => [
1868 + 'border' => [
1869 + 'default' => 'none',
1870 + ],
1871 + ],
1872 + ]
1873 + );
1874 +
1875 + $this->add_responsive_control(
1876 + 'kng_card_carousel_description_border_radius',
1877 + [
1878 + 'label' => esc_html__('Border Radius', 'king-addons'),
1879 + 'type' => Controls_Manager::DIMENSIONS,
1880 + 'size_units' => ['px', '%'],
1881 + 'default' => [
1882 + 'top' => 0,
1883 + 'right' => 0,
1884 + 'bottom' => 0,
1885 + 'left' => 0,
1886 + 'unit' => 'px',
1887 + ],
1888 + 'selectors' => [
1889 + '{{WRAPPER}} .king-addons-card-carousel-description' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1890 + ]
1891 + ]
1892 + );
1893 +
1894 + $this->end_controls_section();
1895 +
1896 + $this->start_controls_section(
1897 + 'kng_card_carousel_style_section_button',
1898 + [
1899 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
1900 + 'tab' => Controls_Manager::TAB_STYLE,
1901 + ]
1902 + );
1903 +
1904 + $this->add_control(
1905 + 'kng_card_carousel_btn_h_position',
1906 + [
1907 + 'label' => esc_html__('Button Horizontal Position', 'king-addons'),
1908 + 'type' => Controls_Manager::CHOOSE,
1909 + 'default' => 'center',
1910 + 'options' => [
1911 + 'flex-start' => [
1912 + 'title' => esc_html__('Left', 'king-addons'),
1913 + 'icon' => 'eicon-h-align-left',
1914 + ],
1915 + 'center' => [
1916 + 'title' => esc_html__('Center', 'king-addons'),
1917 + 'icon' => 'eicon-h-align-center',
1918 + ],
1919 + 'flex-end' => [
1920 + 'title' => esc_html__('Right', 'king-addons'),
1921 + 'icon' => 'eicon-h-align-right',
1922 + ],
1923 + ],
1924 + 'selectors' => [
1925 + '{{WRAPPER}} .king-addons-card-carousel-button' => 'align-items: {{VALUE}};',
1926 + ]
1927 + ]
1928 + );
1929 +
1930 + $this->add_control(
1931 + 'kng_card_carousel_btn_txt_align',
1932 + [
1933 + 'label' => esc_html__('Button Text Align', 'king-addons'),
1934 + 'type' => Controls_Manager::CHOOSE,
1935 + 'default' => 'center',
1936 + 'options' => [
1937 + 'left' => [
1938 + 'title' => esc_html__('Left', 'king-addons'),
1939 + 'icon' => 'eicon-h-align-left',
1940 + ],
1941 + 'center' => [
1942 + 'title' => esc_html__('Center', 'king-addons'),
1943 + 'icon' => 'eicon-h-align-center',
1944 + ],
1945 + 'right' => [
1946 + 'title' => esc_html__('Right', 'king-addons'),
1947 + 'icon' => 'eicon-h-align-right',
1948 + ],
1949 + ],
1950 + 'selectors' => [
1951 + '{{WRAPPER}} .king-addons-card-carousel-button .king-addons-card-carousel-btn' => 'text-align: {{VALUE}};',
1952 + ]
1953 + ]
1954 + );
1955 +
1956 + $this->add_control(
1957 + 'kng_card_carousel_btn_width_type',
1958 + [
1959 + 'label' => esc_html__('Width', 'king-addons'),
1960 + 'type' => Controls_Manager::SELECT,
1961 + 'options' => [
1962 + 'auto' => esc_html__('Auto', 'king-addons'),
1963 + 'custom' => esc_html__('Custom', 'king-addons'),
1964 + ],
1965 + 'default' => 'auto',
1966 + ]
1967 + );
1968 +
1969 + $this->add_responsive_control(
1970 + 'kng_card_carousel_btn_width',
1971 + [
1972 + 'label' => esc_html__('Width (%)', 'king-addons'),
1973 + 'type' => Controls_Manager::NUMBER,
1974 + 'min' => 0,
1975 + 'step' => 1,
1976 + 'max' => 100,
1977 + 'default' => 100,
1978 + 'selectors' => [
1979 + '{{WRAPPER}} .king-addons-card-carousel-button .king-addons-card-carousel-btn' => 'width: {{SIZE}}%;'
1980 + ],
1981 + 'condition' => [
1982 + 'kng_card_carousel_btn_width_type' => 'custom'
1983 + ]
1984 + ]
1985 + );
1986 +
1987 + $this->add_responsive_control(
1988 + 'kng_card_carousel_btn_margin',
1989 + [
1990 + 'label' => esc_html__('Margin (px)', 'king-addons'),
1991 + 'type' => Controls_Manager::DIMENSIONS,
1992 + 'size_units' => ['px'],
1993 + 'default' => [
1994 + 'top' => 10,
1995 + 'right' => 0,
1996 + 'bottom' => 10,
1997 + 'left' => 0,
1998 + ],
1999 + 'selectors' => [
2000 + '{{WRAPPER}} .king-addons-card-carousel-button .king-addons-card-carousel-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2001 + ]
2002 + ]
2003 + );
2004 +
2005 + $this->start_controls_tabs('kng_card_carousel_btn_tabs');
2006 +
2007 + $this->start_controls_tab(
2008 + 'kng_card_carousel_btn_tab_normal',
2009 + [
2010 + 'label' => esc_html__('Normal', 'king-addons'),
2011 + ]
2012 + );
2013 +
2014 + $this->add_group_control(
2015 + Group_Control_Typography::get_type(),
2016 + [
2017 + 'name' => 'kng_card_carousel_btn_typography',
2018 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-btn',
2019 + ]
2020 + );
2021 +
2022 + $this->add_control(
2023 + 'kng_card_carousel_btn_txt_color',
2024 + [
2025 + 'label' => esc_html__('Text Color', 'king-addons'),
2026 + 'type' => Controls_Manager::COLOR,
2027 + 'default' => '#ffffff',
2028 + 'selectors' => [
2029 + '{{WRAPPER}} .king-addons-card-carousel-btn' => 'color: {{VALUE}}'
2030 + ],
2031 + ]
2032 + );
2033 +
2034 + $this->add_control(
2035 + 'kng_card_carousel_btn_bg_color',
2036 + [
2037 + 'label' => esc_html__('Background Color', 'king-addons'),
2038 + 'type' => Controls_Manager::COLOR,
2039 + 'default' => '#574ff7',
2040 + 'selectors' => [
2041 + '{{WRAPPER}} .king-addons-card-carousel-btn' => 'background-color: {{VALUE}}',
2042 + ],
2043 + ]
2044 + );
2045 +
2046 + $this->add_responsive_control(
2047 + 'kng_card_carousel_btn_padding',
2048 + [
2049 + 'label' => esc_html__('Padding (px)', 'king-addons'),
2050 + 'type' => Controls_Manager::DIMENSIONS,
2051 + 'size_units' => ['px'],
2052 + 'default' => [
2053 + 'top' => 10,
2054 + 'right' => 10,
2055 + 'bottom' => 10,
2056 + 'left' => 10,
2057 + ],
2058 + 'selectors' => [
2059 + '{{WRAPPER}} .king-addons-card-carousel-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2060 + ]
2061 + ]
2062 + );
2063 +
2064 + $this->add_group_control(
2065 + Group_Control_Box_Shadow::get_type(),
2066 + [
2067 + 'name' => 'kng_card_carousel_btn_box_shadow',
2068 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-btn',
2069 + ]
2070 + );
2071 +
2072 + $this->add_group_control(
2073 + Group_Control_Border::get_type(),
2074 + [
2075 + 'name' => 'kng_card_carousel_btn_border',
2076 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-btn',
2077 + 'fields_options' => [
2078 + 'border' => [
2079 + 'default' => 'none',
2080 + ],
2081 + ],
2082 + ]
2083 + );
2084 +
2085 + $this->add_responsive_control(
2086 + 'kng_card_carousel_btn_border_radius',
2087 + [
2088 + 'label' => esc_html__('Border Radius', 'king-addons'),
2089 + 'type' => Controls_Manager::DIMENSIONS,
2090 + 'size_units' => ['px', '%'],
2091 + 'default' => [
2092 + 'top' => 0,
2093 + 'right' => 0,
2094 + 'bottom' => 0,
2095 + 'left' => 0,
2096 + ],
2097 + 'selectors' => [
2098 + '{{WRAPPER}} .king-addons-card-carousel-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2099 + ]
2100 + ]
2101 + );
2102 +
2103 + $this->end_controls_tab();
2104 +
2105 + $this->start_controls_tab(
2106 + 'kng_card_carousel_btn_tab_hover',
2107 + [
2108 + 'label' => esc_html__('Hover', 'king-addons'),
2109 + ]
2110 + );
2111 +
2112 + $this->add_group_control(
2113 + Group_Control_Typography::get_type(),
2114 + [
2115 + 'name' => 'kng_card_carousel_btn_typography_hover',
2116 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-btn:hover',
2117 + ]
2118 + );
2119 +
2120 + $this->add_control(
2121 + 'kng_card_carousel_btn_txt_color_hover',
2122 + [
2123 + 'label' => esc_html__('Text Color', 'king-addons'),
2124 + 'type' => Controls_Manager::COLOR,
2125 + 'selectors' => [
2126 + '{{WRAPPER}} .king-addons-card-carousel-btn:hover' => 'color: {{VALUE}}'
2127 + ],
2128 + ]
2129 + );
2130 +
2131 + $this->add_control(
2132 + 'kng_card_carousel_btn_bg_color_hover',
2133 + [
2134 + 'label' => esc_html__('Background Color', 'king-addons'),
2135 + 'type' => Controls_Manager::COLOR,
2136 + 'selectors' => [
2137 + '{{WRAPPER}} .king-addons-card-carousel-btn:hover' => 'background-color: {{VALUE}}',
2138 + ],
2139 + ]
2140 + );
2141 +
2142 + $this->add_responsive_control(
2143 + 'kng_card_carousel_btn_padding_hover',
2144 + [
2145 + 'label' => esc_html__('Padding', 'king-addons'),
2146 + 'type' => Controls_Manager::DIMENSIONS,
2147 + 'size_units' => ['px'],
2148 + 'selectors' => [
2149 + '{{WRAPPER}} .king-addons-card-carousel-btn:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2150 + ]
2151 + ]
2152 + );
2153 +
2154 + $this->add_group_control(
2155 + Group_Control_Box_Shadow::get_type(),
2156 + [
2157 + 'name' => 'kng_card_carousel_btn_box_shadow_hover',
2158 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-btn:hover',
2159 + ]
2160 + );
2161 +
2162 + $this->add_group_control(
2163 + Group_Control_Border::get_type(),
2164 + [
2165 + 'name' => 'kng_card_carousel_btn_border_hover',
2166 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-btn:hover',
2167 + ]
2168 + );
2169 +
2170 + $this->add_responsive_control(
2171 + 'kng_card_carousel_btn_border_radius_hover',
2172 + [
2173 + 'label' => esc_html__('Border Radius', 'king-addons'),
2174 + 'type' => Controls_Manager::DIMENSIONS,
2175 + 'size_units' => ['px', '%'],
2176 + 'selectors' => [
2177 + '{{WRAPPER}} .king-addons-card-carousel-btn:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2178 + ]
2179 + ]
2180 + );
2181 +
2182 + $this->end_controls_tab();
2183 + $this->end_controls_tabs();
2184 + $this->end_controls_section();
2185 + // END Button
2186 +
2187 + /** START SECTION: Navigation */
2188 + $this->start_controls_section(
2189 + 'kng_card_carousel_style_section_nav',
2190 + [
2191 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation', 'king-addons'),
2192 + 'tab' => Controls_Manager::TAB_STYLE,
2193 + ]
2194 + );
2195 +
2196 + $this->add_control(
2197 + 'kng_card_carousel_nav_icon_prev_title',
2198 + [
2199 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Previous button', 'king-addons'),
2200 + 'type' => Controls_Manager::HEADING,
2201 + ]
2202 + );
2203 +
2204 + $this->add_control(
2205 + 'kng_card_carousel_nav_icon_prev',
2206 + [
2207 + 'label' => esc_html__('Icon', 'king-addons'),
2208 + 'type' => Controls_Manager::ICONS,
2209 + 'skin' => 'inline',
2210 + 'label_block' => false,
2211 + 'default' => [
2212 + 'value' => 'fas fa-chevron-left',
2213 + 'library' => 'fa-solid',
2214 + ],
2215 + ]
2216 + );
2217 +
2218 + $this->add_responsive_control(
2219 + 'kng_card_carousel_nav_margin_prev',
2220 + [
2221 + 'label' => esc_html__('Margin', 'king-addons'),
2222 + 'type' => Controls_Manager::DIMENSIONS,
2223 + 'size_units' => ['px'],
2224 + 'default' => [
2225 + 'top' => 0,
2226 + 'right' => 0,
2227 + 'bottom' => 0,
2228 + 'left' => 0,
2229 + 'unit' => 'px',
2230 + 'isLinked' => false
2231 + ],
2232 + 'selectors' => [
2233 + '{{WRAPPER}} .king-addons-card-carousel-nav-prev .king-addons-card-carousel-nav-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2234 + ]
2235 + ]
2236 + );
2237 +
2238 +
2239 + $this->add_responsive_control(
2240 + 'kng_card_carousel_nav_prev_transform_scale',
2241 + [
2242 + 'label' => esc_html__('Scale on hover (%)', 'king-addons'),
2243 + 'type' => Controls_Manager::NUMBER,
2244 + 'step' => 0.1,
2245 + 'min' => 0,
2246 + 'default' => 1.3,
2247 + 'selectors' => [
2248 + '{{WRAPPER}} .king-addons-card-carousel-nav-prev:hover .king-addons-card-carousel-nav-inner' => 'transform: scale({{VALUE}});',
2249 + ],
2250 + ]
2251 + );
2252 +
2253 + $this->add_responsive_control(
2254 + 'kng_card_carousel_nav_position_v_prev',
2255 + [
2256 + 'type' => Controls_Manager::SLIDER,
2257 + 'label' => esc_html__('Vertical position (%)', 'king-addons'),
2258 + 'size_units' => ['%'],
2259 + 'range' => [
2260 + '%' => [
2261 + 'min' => 0,
2262 + 'max' => 100,
2263 + ],
2264 + ],
2265 + 'default' => [
2266 + 'unit' => '%',
2267 + 'size' => 50,
2268 + ],
2269 + 'selectors' => [
2270 + '{{WRAPPER}} .king-addons-card-carousel-nav-prev' => 'top: {{SIZE}}{{UNIT}};',
2271 + ],
2272 + ]
2273 + );
2274 +
2275 + $this->add_responsive_control(
2276 + 'kng_card_carousel_nav_position_h_prev',
2277 + [
2278 + 'type' => Controls_Manager::SLIDER,
2279 + 'label' => esc_html__('Horizontal position (%)', 'king-addons'),
2280 + 'size_units' => ['%'],
2281 + 'range' => [
2282 + '%' => [
2283 + 'min' => 0,
2284 + 'max' => 100,
2285 + ],
2286 + ],
2287 + 'default' => [
2288 + 'unit' => '%',
2289 + 'size' => 0,
2290 + ],
2291 + 'selectors' => [
2292 + '{{WRAPPER}} .king-addons-card-carousel-nav-prev' => 'left: {{SIZE}}{{UNIT}};',
2293 + ],
2294 + ]
2295 + );
2296 +
2297 + $this->add_control(
2298 + 'kng_card_carousel_nav_icon_next_title',
2299 + [
2300 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Next button', 'king-addons'),
2301 + 'type' => Controls_Manager::HEADING,
2302 + 'separator' => 'before',
2303 + ]
2304 + );
2305 +
2306 + $this->add_control(
2307 + 'kng_card_carousel_nav_icon_next',
2308 + [
2309 + 'label' => esc_html__('Icon', 'king-addons'),
2310 + 'type' => Controls_Manager::ICONS,
2311 + 'skin' => 'inline',
2312 + 'label_block' => false,
2313 + 'default' => [
2314 + 'value' => 'fas fa-chevron-right',
2315 + 'library' => 'fa-solid',
2316 + ],
2317 + ]
2318 + );
2319 +
2320 + $this->add_responsive_control(
2321 + 'kng_card_carousel_nav_margin_next',
2322 + [
2323 + 'label' => esc_html__('Margin', 'king-addons'),
2324 + 'type' => Controls_Manager::DIMENSIONS,
2325 + 'size_units' => ['px'],
2326 + 'default' => [
2327 + 'top' => 0,
2328 + 'right' => 0,
2329 + 'bottom' => 0,
2330 + 'left' => 0,
2331 + 'unit' => 'px',
2332 + 'isLinked' => false
2333 + ],
2334 + 'selectors' => [
2335 + '{{WRAPPER}} .king-addons-card-carousel-nav-next .king-addons-card-carousel-nav-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2336 + ]
2337 + ]
2338 + );
2339 +
2340 + $this->add_responsive_control(
2341 + 'kng_card_carousel_nav_next_transform_scale',
2342 + [
2343 + 'label' => esc_html__('Scale on hover (%)', 'king-addons'),
2344 + 'type' => Controls_Manager::NUMBER,
2345 + 'step' => 0.1,
2346 + 'min' => 0,
2347 + 'default' => 1.3,
2348 + 'selectors' => [
2349 + '{{WRAPPER}} .king-addons-card-carousel-nav-next:hover .king-addons-card-carousel-nav-inner' => 'transform: scale({{VALUE}});',
2350 + ],
2351 + ]
2352 + );
2353 +
2354 + $this->add_responsive_control(
2355 + 'kng_card_carousel_nav_position_v_next',
2356 + [
2357 + 'type' => Controls_Manager::SLIDER,
2358 + 'label' => esc_html__('Vertical position (%)', 'king-addons'),
2359 + 'size_units' => ['%'],
2360 + 'range' => [
2361 + '%' => [
2362 + 'min' => 0,
2363 + 'max' => 100,
2364 + ],
2365 + ],
2366 + 'default' => [
2367 + 'unit' => '%',
2368 + 'size' => 50,
2369 + ],
2370 + 'selectors' => [
2371 + '{{WRAPPER}} .king-addons-card-carousel-nav-next' => 'top: {{SIZE}}{{UNIT}};',
2372 + ],
2373 + ]
2374 + );
2375 +
2376 + $this->add_responsive_control(
2377 + 'kng_card_carousel_nav_position_h_next',
2378 + [
2379 + 'type' => Controls_Manager::SLIDER,
2380 + 'label' => esc_html__('Horizontal position (%)', 'king-addons'),
2381 + 'size_units' => ['%'],
2382 + 'range' => [
2383 + '%' => [
2384 + 'min' => 0,
2385 + 'max' => 100,
2386 + ],
2387 + ],
2388 + 'default' => [
2389 + 'unit' => '%',
2390 + 'size' => 100,
2391 + ],
2392 + 'selectors' => [
2393 + '{{WRAPPER}} .king-addons-card-carousel-nav-next' => 'right: calc(100% - {{SIZE}}{{UNIT}});',
2394 + ],
2395 + ]
2396 + );
2397 +
2398 + // common
2399 + $this->add_control(
2400 + 'kng_card_carousel_nav_icon_common_title',
2401 + [
2402 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common settings', 'king-addons'),
2403 + 'type' => Controls_Manager::HEADING,
2404 + 'separator' => 'before',
2405 + ]
2406 + );
2407 +
2408 + $this->add_responsive_control(
2409 + 'kng_card_carousel_nav_icon_size',
2410 + [
2411 + 'label' => esc_html__('Icon Size', 'king-addons'),
2412 + 'type' => Controls_Manager::NUMBER,
2413 + 'step' => 1,
2414 + 'min' => 0,
2415 + 'default' => 32,
2416 + 'selectors' => [
2417 + '{{WRAPPER}} .king-addons-card-carousel-nav i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
2418 + '{{WRAPPER}} .king-addons-card-carousel-nav img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
2419 + '{{WRAPPER}} .king-addons-card-carousel-nav svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
2420 + ],
2421 + ]
2422 + );
2423 +
2424 + $this->add_responsive_control(
2425 + 'kng_card_carousel_nav_transition_icon',
2426 + [
2427 + 'label' => esc_html__('Transition duration for icon on hover (ms)', 'king-addons'),
2428 + 'type' => Controls_Manager::NUMBER,
2429 + 'min' => 0,
2430 + 'step' => 10,
2431 + 'default' => 300,
2432 + 'selectors' => [
2433 + '{{WRAPPER}} .king-addons-card-carousel-nav i' => 'transition: all {{SIZE}}ms;',
2434 + '{{WRAPPER}} .king-addons-card-carousel-nav img' => 'transition: all {{SIZE}}ms;',
2435 + '{{WRAPPER}} .king-addons-card-carousel-nav svg' => 'transition: all {{SIZE}}ms;',
2436 + '{{WRAPPER}} .king-addons-card-carousel-nav .king-addons-card-carousel-nav-inner' => 'transition: all {{SIZE}}ms;',
2437 + ],
2438 + ]
2439 + );
2440 +
2441 + $this->add_responsive_control(
2442 + 'kng_card_carousel_nav_padding',
2443 + [
2444 + 'label' => esc_html__('Padding', 'king-addons'),
2445 + 'type' => Controls_Manager::DIMENSIONS,
2446 + 'size_units' => ['px', '%'],
2447 + 'default' => [
2448 + 'top' => 10,
2449 + 'right' => 10,
2450 + 'bottom' => 10,
2451 + 'left' => 10,
2452 + 'unit' => 'px',
2453 + ],
2454 + 'selectors' => [
2455 + '{{WRAPPER}} .king-addons-card-carousel-nav-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2456 + ]
2457 + ]
2458 + );
2459 +
2460 + $this->start_controls_tabs('kng_card_carousel_nav_tabs');
2461 +
2462 + $this->start_controls_tab(
2463 + 'kng_card_carousel_nav_tab_normal',
2464 + [
2465 + 'label' => esc_html__('Normal', 'king-addons'),
2466 + ]
2467 + );
2468 +
2469 + $this->add_control(
2470 + 'kng_card_carousel_nav_color',
2471 + [
2472 + 'label' => esc_html__('Color', 'king-addons'),
2473 + 'type' => Controls_Manager::COLOR,
2474 + 'default' => '#00000033',
2475 + 'selectors' => [
2476 + '{{WRAPPER}} .king-addons-card-carousel-nav i' => 'color: {{VALUE}};',
2477 + '{{WRAPPER}} .king-addons-card-carousel-nav svg' => 'fill: {{VALUE}};'
2478 + ],
2479 + ]
2480 + );
2481 +
2482 + $this->add_control(
2483 + 'kng_card_carousel_nav_bg_color',
2484 + [
2485 + 'label' => esc_html__('Background Color', 'king-addons'),
2486 + 'type' => Controls_Manager::COLOR,
2487 + 'default' => '',
2488 + 'selectors' => [
2489 + '{{WRAPPER}} .king-addons-card-carousel-nav-inner' => 'background-color: {{VALUE}}',
2490 + ],
2491 + ]
2492 + );
2493 +
2494 + $this->add_group_control(
2495 + Group_Control_Box_Shadow::get_type(),
2496 + [
2497 + 'name' => 'kng_card_carousel_nav_box_shadow',
2498 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-nav-inner',
2499 + ]
2500 + );
2501 +
2502 + $this->add_group_control(
2503 + Group_Control_Border::get_type(),
2504 + [
2505 + 'name' => 'kng_card_carousel_nav_border',
2506 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-nav-inner',
2507 + 'fields_options' => [
2508 + 'border' => [
2509 + 'default' => 'none',
2510 + ],
2511 + ],
2512 + ]
2513 + );
2514 +
2515 + $this->add_responsive_control(
2516 + 'kng_card_carousel_nav_border_radius',
2517 + [
2518 + 'label' => esc_html__('Border Radius', 'king-addons'),
2519 + 'type' => Controls_Manager::DIMENSIONS,
2520 + 'size_units' => ['px', '%'],
2521 + 'default' => [
2522 + 'top' => 100,
2523 + 'right' => 100,
2524 + 'bottom' => 100,
2525 + 'left' => 100,
2526 + 'unit' => '%',
2527 + ],
2528 + 'selectors' => [
2529 + '{{WRAPPER}} .king-addons-card-carousel-nav-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2530 + ]
2531 + ]
2532 + );
2533 + $this->end_controls_tab();
2534 +
2535 + $this->start_controls_tab(
2536 + 'kng_card_carousel_nav_tab_hover',
2537 + [
2538 + 'label' => esc_html__('Hover', 'king-addons'),
2539 + ]
2540 + );
2541 +
2542 + $this->add_control(
2543 + 'kng_card_carousel_nav_color_hover',
2544 + [
2545 + 'label' => esc_html__('Color', 'king-addons'),
2546 + 'type' => Controls_Manager::COLOR,
2547 + 'selectors' => [
2548 + '{{WRAPPER}} .king-addons-card-carousel-nav i:hover' => 'color: {{VALUE}};',
2549 + '{{WRAPPER}} .king-addons-card-carousel-nav svg:hover' => 'fill: {{VALUE}};'
2550 + ],
2551 + ]
2552 + );
2553 +
2554 + $this->add_control(
2555 + 'kng_card_carousel_nav_bg_color_hover',
2556 + [
2557 + 'label' => esc_html__('Background Color', 'king-addons'),
2558 + 'type' => Controls_Manager::COLOR,
2559 + 'selectors' => [
2560 + '{{WRAPPER}} .king-addons-card-carousel-nav-inner:hover' => 'background-color: {{VALUE}}',
2561 + ],
2562 + ]
2563 + );
2564 +
2565 + $this->add_group_control(
2566 + Group_Control_Box_Shadow::get_type(),
2567 + [
2568 + 'name' => 'kng_card_carousel_nav_box_shadow_hover',
2569 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-nav-inner:hover',
2570 + ]
2571 + );
2572 +
2573 + $this->add_group_control(
2574 + Group_Control_Border::get_type(),
2575 + [
2576 + 'name' => 'kng_card_carousel_nav_border_hover',
2577 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-nav-inner:hover',
2578 + ]
2579 + );
2580 +
2581 + $this->add_responsive_control(
2582 + 'kng_card_carousel_nav_border_radius_hover',
2583 + [
2584 + 'label' => esc_html__('Border Radius', 'king-addons'),
2585 + 'type' => Controls_Manager::DIMENSIONS,
2586 + 'size_units' => ['px', '%'],
2587 + 'selectors' => [
2588 + '{{WRAPPER}} .king-addons-card-carousel-nav-inner:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2589 + ]
2590 + ]
2591 + );
2592 +
2593 + $this->end_controls_tab();
2594 +
2595 + $this->end_controls_tabs();
2596 + $this->end_controls_section();
2597 + /** END SECTION: Navigation */
2598 +
2599 + /** SECTION: Pagination */
2600 + $this->start_controls_section(
2601 + 'kng_card_carousel_style_section_pag',
2602 + [
2603 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
2604 + 'tab' => Controls_Manager::TAB_STYLE,
2605 + ]
2606 + );
2607 +
2608 + $this->add_control(
2609 + 'kng_card_carousel_pag_color',
2610 + [
2611 + 'label' => esc_html__('Color', 'king-addons'),
2612 + 'type' => Controls_Manager::COLOR,
2613 + 'default' => '#000000',
2614 + 'selectors' => [
2615 + '{{WRAPPER}} .king-addons-card-carousel-pagination' => '--swiper-theme-color: {{VALUE}}; --swiper-pagination-fraction-color: {{VALUE}};',
2616 + ],
2617 + ]
2618 + );
2619 +
2620 + $this->add_control(
2621 + 'kng_card_carousel_pag_color_second',
2622 + [
2623 + 'label' => esc_html__('Second Color', 'king-addons'),
2624 + 'type' => Controls_Manager::COLOR,
2625 + 'default' => '#00000033',
2626 + 'selectors' => [
2627 + '{{WRAPPER}} .king-addons-card-carousel-pagination' => '--swiper-pagination-progressbar-bg-color: {{VALUE}}; --swiper-pagination-bullet-inactive-color: {{VALUE}}; --swiper-pagination-bullet-inactive-opacity: 1;',
2628 + ],
2629 + ]
2630 + );
2631 +
2632 + $this->add_control(
2633 + 'kng_card_carousel_pag_bullets_title',
2634 + [
2635 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Bullets type', 'king-addons'),
2636 + 'type' => Controls_Manager::HEADING,
2637 + 'separator' => 'before',
2638 + ]
2639 + );
2640 +
2641 + $this->add_responsive_control(
2642 + 'kng_card_carousel_pag_bullets_size',
2643 + [
2644 + 'label' => esc_html__('Size', 'king-addons'),
2645 + 'type' => Controls_Manager::NUMBER,
2646 + 'min' => 0,
2647 + 'step' => 1,
2648 + 'default' => 8,
2649 + 'selectors' => [
2650 + '{{WRAPPER}} .king-addons-card-carousel-pagination' => '--swiper-pagination-bullet-size: {{SIZE}}px;'
2651 + ],
2652 + ]
2653 + );
2654 +
2655 + $this->add_responsive_control(
2656 + 'kng_card_carousel_pag_bullets_gap',
2657 + [
2658 + 'label' => esc_html__('Bullets gap', 'king-addons'),
2659 + 'type' => Controls_Manager::NUMBER,
2660 + 'min' => 0,
2661 + 'step' => 1,
2662 + 'default' => 4,
2663 + 'selectors' => [
2664 + '{{WRAPPER}} .king-addons-card-carousel-pagination' => '--swiper-pagination-bullet-horizontal-gap: {{SIZE}}px;'
2665 + ],
2666 + ]
2667 + );
2668 +
2669 + $this->add_control(
2670 + 'kng_card_carousel_pag_progressbar_title',
2671 + [
2672 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Progress bar type', 'king-addons'),
2673 + 'type' => Controls_Manager::HEADING,
2674 + 'separator' => 'before',
2675 + ]
2676 + );
2677 +
2678 + $this->add_responsive_control(
2679 + 'kng_card_carousel_pag_progressbar_size',
2680 + [
2681 + 'label' => esc_html__('Size', 'king-addons'),
2682 + 'type' => Controls_Manager::NUMBER,
2683 + 'min' => 0,
2684 + 'step' => 1,
2685 + 'default' => 4,
2686 + 'selectors' => [
2687 + '{{WRAPPER}} .king-addons-card-carousel-pagination' => '--swiper-pagination-progressbar-size: {{SIZE}}px;'
2688 + ],
2689 + ]
2690 + );
2691 +
2692 + $this->add_control(
2693 + 'kng_card_carousel_pag_fraction_title',
2694 + [
2695 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Fraction type', 'king-addons'),
2696 + 'type' => Controls_Manager::HEADING,
2697 + 'separator' => 'before',
2698 + ]
2699 + );
2700 +
2701 + $this->add_group_control(
2702 + Group_Control_Typography::get_type(),
2703 + [
2704 + 'name' => 'kng_card_carousel_pag_fraction_typography',
2705 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-pagination.swiper-pagination-fraction',
2706 + ]
2707 + );
2708 +
2709 + $this->end_controls_section();
2710 + /** END SECTION: Pagination */
2711 +
2712 + /** SECTION: Whole Carousel */
2713 + $this->start_controls_section(
2714 + 'kng_card_carousel_style_section_whole_carousel',
2715 + [
2716 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Carousel', 'king-addons'),
2717 + 'tab' => Controls_Manager::TAB_STYLE,
2718 + ]
2719 + );
2720 +
2721 + $this->add_group_control(
2722 + Group_Control_Background::get_type(),
2723 + [
2724 + 'name' => 'kng_card_carousel_whole_carousel_bg',
2725 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-items'
2726 + ]
2727 + );
2728 +
2729 + $this->add_responsive_control(
2730 + 'kng_card_carousel_whole_carousel_margin',
2731 + [
2732 + 'label' => esc_html__('Whole carousel margin', 'king-addons'),
2733 + 'type' => Controls_Manager::DIMENSIONS,
2734 + 'size_units' => ['px', '%'],
2735 + 'default' => [
2736 + 'top' => 0,
2737 + 'right' => 42,
2738 + 'bottom' => 10,
2739 + 'left' => 42,
2740 + 'unit' => 'px',
2741 + ],
2742 + 'tablet_default' => [
2743 + 'top' => 0,
2744 + 'right' => 0,
2745 + 'bottom' => 0,
2746 + 'left' => 0,
2747 + 'unit' => 'px',
2748 + ],
2749 + 'mobile_default' => [
2750 + 'top' => 0,
2751 + 'right' => 0,
2752 + 'bottom' => 0,
2753 + 'left' => 0,
2754 + 'unit' => 'px',
2755 + ],
2756 + 'selectors' => [
2757 + '{{WRAPPER}} .king-addons-card-carousel-items' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2758 + ]
2759 + ]
2760 + );
2761 +
2762 + $this->add_responsive_control(
2763 + 'kng_card_carousel_whole_carousel_margin_wrapper',
2764 + [
2765 + 'label' => esc_html__('Cards wrapper margin', 'king-addons'),
2766 + 'type' => Controls_Manager::DIMENSIONS,
2767 + 'size_units' => ['px', '%'],
2768 + 'default' => [
2769 + 'top' => 10,
2770 + 'right' => 0,
2771 + 'bottom' => 42,
2772 + 'left' => 0,
2773 + 'unit' => 'px',
2774 + ],
2775 + 'tablet_default' => [
2776 + 'top' => 10,
2777 + 'right' => 0,
2778 + 'bottom' => 42,
2779 + 'left' => 0,
2780 + 'unit' => 'px',
2781 + ],
2782 + 'mobile_default' => [
2783 + 'top' => 10,
2784 + 'right' => 0,
2785 + 'bottom' => 42,
2786 + 'left' => 0,
2787 + 'unit' => 'px',
2788 + ],
2789 + 'selectors' => [
2790 + '{{WRAPPER}} .king-addons-card-carousel-items .swiper-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2791 + ]
2792 + ]
2793 + );
2794 +
2795 + $this->add_responsive_control(
2796 + 'kng_card_carousel_whole_carousel_padding',
2797 + [
2798 + 'label' => esc_html__('Padding', 'king-addons'),
2799 + 'type' => Controls_Manager::DIMENSIONS,
2800 + 'size_units' => ['px', '%'],
2801 + 'default' => [
2802 + 'top' => 0,
2803 + 'right' => 0,
2804 + 'bottom' => 0,
2805 + 'left' => 0,
2806 + 'unit' => 'px',
2807 + ],
2808 + 'selectors' => [
2809 + '{{WRAPPER}} .king-addons-card-carousel-items' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2810 + ]
2811 + ]
2812 + );
2813 +
2814 + $this->add_group_control(
2815 + Group_Control_Box_Shadow::get_type(),
2816 + [
2817 + 'name' => 'kng_card_carousel_whole_carousel_box_shadow',
2818 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-items',
2819 + ]
2820 + );
2821 +
2822 + $this->add_group_control(
2823 + Group_Control_Border::get_type(),
2824 + [
2825 + 'name' => 'kng_card_carousel_whole_carousel_border',
2826 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-items',
2827 + 'fields_options' => [
2828 + 'border' => [
2829 + 'default' => 'none',
2830 + ],
2831 + ],
2832 + ]
2833 + );
2834 +
2835 + $this->add_responsive_control(
2836 + 'kng_card_carousel_whole_carousel_border_radius',
2837 + [
2838 + 'label' => esc_html__('Border Radius', 'king-addons'),
2839 + 'type' => Controls_Manager::DIMENSIONS,
2840 + 'size_units' => ['px', '%'],
2841 + 'default' => [
2842 + 'top' => 0,
2843 + 'right' => 0,
2844 + 'bottom' => 0,
2845 + 'left' => 0,
2846 + 'unit' => 'px',
2847 + ],
2848 + 'selectors' => [
2849 + '{{WRAPPER}} .king-addons-card-carousel-items' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2850 + ]
2851 + ]
2852 + );
2853 +
2854 + $this->end_controls_section();
2855 + /** END SECTION: Whole Carousel */
2856 +
2857 + $this->start_controls_section(
2858 + 'kng_card_carousel_style_section_whole_card',
2859 + [
2860 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Card', 'king-addons'),
2861 + 'tab' => Controls_Manager::TAB_STYLE,
2862 + ]
2863 + );
2864 +
2865 + $this->add_responsive_control(
2866 + 'kng_card_carousel_whole_card_transition',
2867 + [
2868 + 'label' => esc_html__('Transition duration on card hover (ms)', 'king-addons'),
2869 + 'type' => Controls_Manager::NUMBER,
2870 + 'min' => 0,
2871 + 'step' => 10,
2872 + 'default' => 300,
2873 + 'selectors' => [
2874 + '{{WRAPPER}} .king-addons-card-carousel-card-inner' => 'transition: all {{SIZE}}ms;'
2875 + ],
2876 + ]
2877 + );
2878 +
2879 + $this->start_controls_tabs('kng_card_carousel_whole_card_tabs');
2880 +
2881 + $this->start_controls_tab(
2882 + 'kng_card_carousel_whole_card_tab_normal',
2883 + [
2884 + 'label' => esc_html__('Normal', 'king-addons'),
2885 + ]
2886 + );
2887 +
2888 + $this->add_group_control(
2889 + Group_Control_Background::get_type(),
2890 + [
2891 + 'name' => 'kng_card_carousel_whole_card_bg',
2892 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-inner'
2893 + ]
2894 + );
2895 +
2896 + $this->add_responsive_control(
2897 + 'kng_card_carousel_whole_card_padding',
2898 + [
2899 + 'label' => esc_html__('Padding', 'king-addons'),
2900 + 'type' => Controls_Manager::DIMENSIONS,
2901 + 'size_units' => ['px', '%'],
2902 + 'default' => [
2903 + 'top' => 0,
2904 + 'right' => 0,
2905 + 'bottom' => 0,
2906 + 'left' => 0,
2907 + 'unit' => 'px',
2908 + ],
2909 + 'selectors' => [
2910 + '{{WRAPPER}} .king-addons-card-carousel-card-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2911 + ]
2912 + ]
2913 + );
2914 +
2915 + $this->add_group_control(
2916 + Group_Control_Box_Shadow::get_type(),
2917 + [
2918 + 'name' => 'kng_card_carousel_whole_card_box_shadow',
2919 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-inner',
2920 + ]
2921 + );
2922 +
2923 + $this->add_group_control(
2924 + Group_Control_Border::get_type(),
2925 + [
2926 + 'name' => 'kng_card_carousel_whole_card_border',
2927 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-inner',
2928 + 'fields_options' => [
2929 + 'border' => [
2930 + 'default' => 'none',
2931 + ],
2932 + ],
2933 + ]
2934 + );
2935 +
2936 + $this->add_responsive_control(
2937 + 'kng_card_carousel_whole_card_border_radius',
2938 + [
2939 + 'label' => esc_html__('Border Radius', 'king-addons'),
2940 + 'type' => Controls_Manager::DIMENSIONS,
2941 + 'size_units' => ['px', '%'],
2942 + 'default' => [
2943 + 'top' => 0,
2944 + 'right' => 0,
2945 + 'bottom' => 0,
2946 + 'left' => 0,
2947 + 'unit' => 'px',
2948 + ],
2949 + 'selectors' => [
2950 + '{{WRAPPER}} .king-addons-card-carousel-card-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2951 + ]
2952 + ]
2953 + );
2954 +
2955 + $this->end_controls_tab();
2956 +
2957 + $this->start_controls_tab(
2958 + 'kng_card_carousel_whole_card_tab_hover',
2959 + [
2960 + 'label' => esc_html__('Hover', 'king-addons'),
2961 + ]
2962 + );
2963 +
2964 + $this->add_group_control(
2965 + Group_Control_Background::get_type(),
2966 + [
2967 + 'name' => 'kng_card_carousel_whole_card_bg_hover',
2968 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-inner:hover'
2969 + ]
2970 + );
2971 +
2972 + $this->add_responsive_control(
2973 + 'kng_card_carousel_whole_card_padding_hover',
2974 + [
2975 + 'label' => esc_html__('Padding', 'king-addons'),
2976 + 'type' => Controls_Manager::DIMENSIONS,
2977 + 'size_units' => ['px', '%'],
2978 + 'selectors' => [
2979 + '{{WRAPPER}} .king-addons-card-carousel-card-inner:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2980 + ]
2981 + ]
2982 + );
2983 +
2984 + $this->add_group_control(
2985 + Group_Control_Box_Shadow::get_type(),
2986 + [
2987 + 'name' => 'kng_card_carousel_whole_card_box_shadow_hover',
2988 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-inner:hover',
2989 + ]
2990 + );
2991 +
2992 + $this->add_group_control(
2993 + Group_Control_Border::get_type(),
2994 + [
2995 + 'name' => 'kng_card_carousel_whole_card_border_hover',
2996 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-inner:hover',
2997 + ]
2998 + );
2999 +
3000 + $this->add_responsive_control(
3001 + 'kng_card_carousel_whole_card_border_radius_hover',
3002 + [
3003 + 'label' => esc_html__('Border Radius', 'king-addons'),
3004 + 'type' => Controls_Manager::DIMENSIONS,
3005 + 'size_units' => ['px', '%'],
3006 + 'selectors' => [
3007 + '{{WRAPPER}} .king-addons-card-carousel-card-inner:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3008 + ]
3009 + ]
3010 + );
3011 +
3012 + $this->end_controls_tab();
3013 + $this->end_controls_tabs();
3014 + $this->end_controls_section();
3015 +
3016 + $this->start_controls_section(
3017 + 'kng_card_carousel_style_section_whole_image_container',
3018 + [
3019 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Image Container', 'king-addons'),
3020 + 'tab' => Controls_Manager::TAB_STYLE,
3021 + ]
3022 + );
3023 +
3024 + $this->add_control(
3025 + 'kng_card_carousel_style_section_whole_image_container_title',
3026 + [
3027 + 'label' => '<span class="elementor-control-field-description">' .
3028 + esc_html__('Image container includes image and image description.', 'king-addons') .
3029 + '</span>',
3030 + 'type' => Controls_Manager::RAW_HTML,
3031 + ]
3032 + );
3033 +
3034 + $this->add_responsive_control(
3035 + 'kng_card_carousel_whole_image_container_bg_color',
3036 + [
3037 + 'label' => esc_html__('Background Color', 'king-addons'),
3038 + 'type' => Controls_Manager::COLOR,
3039 + 'default' => '',
3040 + 'selectors' => [
3041 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1' => 'background-color: {{VALUE}}',
3042 + ],
3043 + ]
3044 + );
3045 +
3046 + $this->add_responsive_control(
3047 + 'kng_card_carousel_whole_image_container_padding',
3048 + [
3049 + 'label' => esc_html__('Padding', 'king-addons'),
3050 + 'type' => Controls_Manager::DIMENSIONS,
3051 + 'size_units' => ['px', '%'],
3052 + 'default' => [
3053 + 'top' => 0,
3054 + 'right' => 0,
3055 + 'bottom' => 0,
3056 + 'left' => 0,
3057 + 'unit' => 'px',
3058 + ],
3059 + 'selectors' => [
3060 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3061 + ]
3062 + ]
3063 + );
3064 +
3065 + $this->add_responsive_control(
3066 + 'kng_card_carousel_whole_image_container_margin',
3067 + [
3068 + 'label' => esc_html__('Margin', 'king-addons'),
3069 + 'type' => Controls_Manager::DIMENSIONS,
3070 + 'size_units' => ['px', '%'],
3071 + 'default' => [
3072 + 'top' => 0,
3073 + 'right' => 0,
3074 + 'bottom' => 0,
3075 + 'left' => 0,
3076 + 'unit' => 'px',
3077 + ],
3078 + 'selectors' => [
3079 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3080 + ]
3081 + ]
3082 + );
3083 +
3084 + $this->add_group_control(
3085 + Group_Control_Box_Shadow::get_type(),
3086 + [
3087 + 'name' => 'kng_card_carousel_whole_image_container_box_shadow',
3088 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-container-1',
3089 + ]
3090 + );
3091 +
3092 + $this->add_group_control(
3093 + Group_Control_Border::get_type(),
3094 + [
3095 + 'name' => 'kng_card_carousel_whole_image_container_border',
3096 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-container-1',
3097 + 'fields_options' => [
3098 + 'border' => [
3099 + 'default' => 'none',
3100 + ],
3101 + ],
3102 + ]
3103 + );
3104 +
3105 + $this->add_responsive_control(
3106 + 'kng_card_carousel_whole_image_container_border_radius',
3107 + [
3108 + 'label' => esc_html__('Border Radius', 'king-addons'),
3109 + 'type' => Controls_Manager::DIMENSIONS,
3110 + 'size_units' => ['px', '%'],
3111 + 'default' => [
3112 + 'top' => 0,
3113 + 'right' => 0,
3114 + 'bottom' => 0,
3115 + 'left' => 0,
3116 + 'unit' => 'px',
3117 + ],
3118 + 'selectors' => [
3119 + '{{WRAPPER}} .king-addons-card-carousel-card-container-1' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3120 + ]
3121 + ]
3122 + );
3123 +
3124 + $this->end_controls_section();
3125 +
3126 + $this->start_controls_section(
3127 + 'kng_card_carousel_style_section_whole_text_container',
3128 + [
3129 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Text Container', 'king-addons'),
3130 + 'tab' => Controls_Manager::TAB_STYLE,
3131 + ]
3132 + );
3133 +
3134 + $this->add_control(
3135 + 'kng_card_carousel_style_section_whole_text_container_title',
3136 + [
3137 + 'label' => '<span class="elementor-control-field-description">' .
3138 + esc_html__('Text container includes title, subtitle, description and button.', 'king-addons') .
3139 + '</span>',
3140 + 'type' => Controls_Manager::RAW_HTML,
3141 + ]
3142 + );
3143 +
3144 + $this->add_responsive_control(
3145 + 'kng_card_carousel_whole_text_container_bg_color',
3146 + [
3147 + 'label' => esc_html__('Background Color', 'king-addons'),
3148 + 'type' => Controls_Manager::COLOR,
3149 + 'default' => '',
3150 + 'selectors' => [
3151 + '{{WRAPPER}} .king-addons-card-carousel-card-container-2' => 'background-color: {{VALUE}}',
3152 + ],
3153 + ]
3154 + );
3155 +
3156 + $this->add_responsive_control(
3157 + 'kng_card_carousel_whole_text_container_padding',
3158 + [
3159 + 'label' => esc_html__('Padding', 'king-addons'),
3160 + 'type' => Controls_Manager::DIMENSIONS,
3161 + 'size_units' => ['px', '%'],
3162 + 'default' => [
3163 + 'top' => 0,
3164 + 'right' => 0,
3165 + 'bottom' => 0,
3166 + 'left' => 0,
3167 + 'unit' => 'px',
3168 + ],
3169 + 'selectors' => [
3170 + '{{WRAPPER}} .king-addons-card-carousel-card-container-2' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3171 + ]
3172 + ]
3173 + );
3174 +
3175 + $this->add_responsive_control(
3176 + 'kng_card_carousel_whole_text_container_margin',
3177 + [
3178 + 'label' => esc_html__('Margin', 'king-addons'),
3179 + 'type' => Controls_Manager::DIMENSIONS,
3180 + 'size_units' => ['px', '%'],
3181 + 'default' => [
3182 + 'top' => 0,
3183 + 'right' => 0,
3184 + 'bottom' => 0,
3185 + 'left' => 0,
3186 + 'unit' => 'px',
3187 + ],
3188 + 'selectors' => [
3189 + '{{WRAPPER}} .king-addons-card-carousel-card-container-2' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3190 + ]
3191 + ]
3192 + );
3193 +
3194 + $this->add_group_control(
3195 + Group_Control_Box_Shadow::get_type(),
3196 + [
3197 + 'name' => 'kng_card_carousel_whole_text_container_box_shadow',
3198 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-container-2',
3199 + ]
3200 + );
3201 +
3202 + $this->add_group_control(
3203 + Group_Control_Border::get_type(),
3204 + [
3205 + 'name' => 'kng_card_carousel_whole_text_container_border',
3206 + 'selector' => '{{WRAPPER}} .king-addons-card-carousel-card-container-2',
3207 + 'fields_options' => [
3208 + 'border' => [
3209 + 'default' => 'none',
3210 + ],
3211 + ],
3212 + ]
3213 + );
3214 +
3215 + $this->add_responsive_control(
3216 + 'kng_card_carousel_whole_text_container_border_radius',
3217 + [
3218 + 'label' => esc_html__('Border Radius', 'king-addons'),
3219 + 'type' => Controls_Manager::DIMENSIONS,
3220 + 'size_units' => ['px', '%'],
3221 + 'default' => [
3222 + 'top' => 0,
3223 + 'right' => 0,
3224 + 'bottom' => 0,
3225 + 'left' => 0,
3226 + 'unit' => 'px',
3227 + ],
3228 + 'selectors' => [
3229 + '{{WRAPPER}} .king-addons-card-carousel-card-container-2' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
3230 + ]
3231 + ]
3232 + );
3233 +
3234 + $this->end_controls_section();
3235 +
3236 + /** END TAB: STYLE ===================== */
3237 + }
3238 +
3239 + protected function render(): void
3240 + {
3241 + $settings = Core::displaySettings($this);
3242 + $this_ID = $this->get_id();
3243 +
3244 + // Define allowed tags and attributes
3245 + $allowed_tags = wp_kses_allowed_html('post');
3246 + $allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
3247 + $allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
3248 + $allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
3249 + $allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
3250 +
3251 + /** START: Cards Container ===================== */
3252 + ?>
3253 + <div class="king-addons-card-carousel-items-wrap">
3254 + <div class="king-addons-card-carousel-items king-addons-card-carousel-items-<?php echo esc_attr($this_ID); ?> swiper-container swiper">
3255 + <div class="swiper-wrapper<?php if ('yes' === $settings['kng_card_carousel_autoplay_like_ticker_switcher']) {
3256 + echo ' king-addons-card-carousel-autoplay-like-ticker';
3257 + } ?>">
3258 + <?php
3259 +
3260 + $item_count = 0;
3261 +
3262 + /** @noinspection PhpUnusedLocalVariableInspection */
3263 + foreach ($settings['kng_card_carousel_content_items'] as $key => $item) {
3264 +
3265 + // open card div
3266 + echo '<div class="elementor-repeater-item-' . esc_attr($item['_id']) . ' swiper-slide king-addons-card-carousel-card' . (($item['kng_card_carousel_whole_card_link']['url']) ? ' king-addons-card-carousel-cursor-pointer' : '') . '">';
3267 +
3268 + // open inner div
3269 + echo '<div class="king-addons-card-carousel-card-inner">';
3270 +
3271 + // CONTAINER 1
3272 + if ('yes' !== $settings['kng_card_carousel_cards_whole_image_container_switcher']) {
3273 + echo '<div class="king-addons-card-carousel-card-container-1">';
3274 +
3275 + // image
3276 + if ('yes' !== $settings['kng_card_carousel_cards_image_switcher']) {
3277 + echo '<div class="king-addons-card-carousel-image">';
3278 +
3279 + // image link
3280 + if ($item['kng_card_carousel_image_link']['url']) {
3281 + echo '<a href="' . esc_url($item['kng_card_carousel_image_link']['url']) . '"' .
3282 + (($item['kng_card_carousel_image_link']['is_external']) ? ' target="_blank"' : '') .
3283 + (($item['kng_card_carousel_image_link']['nofollow']) ? ' rel="nofollow"' : '') .
3284 + '>';
3285 + }
3286 +
3287 + $image_html = Group_Control_Image_Size::get_attachment_image_html($item, 'kng_card_carousel_image_size', 'kng_card_carousel_image');
3288 + echo wp_kses($image_html, $allowed_tags);
3289 +
3290 + echo ($item['kng_card_carousel_image_link']['url']) ? '</a>' : '';
3291 +
3292 + echo '</div>';
3293 + }
3294 +
3295 + // image description
3296 + if ('yes' !== $settings['kng_card_carousel_cards_imagedescription_switcher']) {
3297 + if ('' !== $item['kng_card_carousel_imagedescription']) {
3298 + echo '<div class="king-addons-card-carousel-imagedescription">';
3299 + echo wp_kses_post($item['kng_card_carousel_imagedescription']);
3300 + echo '</div>';
3301 + }
3302 + }
3303 +
3304 + echo '</div>';
3305 + }
3306 + // END CONTAINER 1
3307 +
3308 + // CONTAINER 2
3309 + if ('yes' !== $settings['kng_card_carousel_cards_whole_text_container_switcher']) {
3310 + echo '<div class="king-addons-card-carousel-card-container-2">';
3311 +
3312 + // title
3313 + if ('yes' !== $settings['kng_card_carousel_cards_title_switcher']) {
3314 + if ('' !== $item['kng_card_carousel_title']) {
3315 + echo '<div class="king-addons-card-carousel-title">';
3316 + echo wp_kses_post($item['kng_card_carousel_title']);
3317 + echo '</div>';
3318 + }
3319 + }
3320 +
3321 + // subtitle
3322 + if ('yes' !== $settings['kng_card_carousel_cards_subtitle_switcher']) {
3323 + if ('' !== $item['kng_card_carousel_subtitle']) {
3324 + echo '<div class="king-addons-card-carousel-subtitle">';
3325 + echo wp_kses_post($item['kng_card_carousel_subtitle']);
3326 + echo '</div>';
3327 + }
3328 + }
3329 +
3330 + // description
3331 + if ('yes' !== $settings['kng_card_carousel_cards_description_switcher']) {
3332 + if ('' !== $item['kng_card_carousel_description']) {
3333 + echo '<div class="king-addons-card-carousel-description">';
3334 + echo wp_kses_post($item['kng_card_carousel_description']);
3335 + echo '</div>';
3336 + }
3337 + }
3338 +
3339 + // button
3340 + if ('' !== $item['kng_card_carousel_btn_text']) {
3341 + echo '<div class="king-addons-card-carousel-button">';
3342 +
3343 + $item_tag = 'div';
3344 +
3345 + if ('' !== $item['kng_card_carousel_btn_link']['url']) {
3346 +
3347 + $item_tag = 'a';
3348 +
3349 + $this->add_render_attribute('kng_card_carousel_btn_attribute' . $item_count, 'href', esc_url($item['kng_card_carousel_btn_link']['url']));
3350 +
3351 + if ($item['kng_card_carousel_btn_link']['is_external']) {
3352 + $this->add_render_attribute('kng_card_carousel_btn_attribute' . $item_count, 'target', '_blank');
3353 + }
3354 +
3355 + if ($item['kng_card_carousel_btn_link']['nofollow']) {
3356 + $this->add_render_attribute('kng_card_carousel_btn_attribute' . $item_count, 'rel', 'nofollow');
3357 + }
3358 + }
3359 +
3360 + $this->add_render_attribute('kng_card_carousel_btn_attribute' . $item_count, 'class', 'king-addons-card-carousel-btn king-addons-card-carousel-btn-' . esc_attr($this_ID));
3361 +
3362 + $html = '<' . esc_attr($item_tag) . ' ' . $this->get_render_attribute_string('kng_card_carousel_btn_attribute' . $item_count) . '>';
3363 +
3364 + echo wp_kses($html, wp_kses_allowed_html('post'));
3365 + echo esc_html($item['kng_card_carousel_btn_text']);
3366 + echo '</' . esc_attr($item_tag) . '>';
3367 +
3368 + echo '</div>';
3369 + }
3370 +
3371 + echo '</div>';
3372 + }
3373 + // END CONTAINER 2
3374 +
3375 + // close card inner div
3376 + echo '</div>';
3377 +
3378 + // card link
3379 + if ($item['kng_card_carousel_whole_card_link']['url']) {
3380 + ?>
3381 + <a href="<?php echo esc_url($item['kng_card_carousel_whole_card_link']['url']); ?>"<?php
3382 + echo(($item['kng_card_carousel_whole_card_link']['is_external']) ? ' target="_blank"' : '');
3383 + echo(($item['kng_card_carousel_whole_card_link']['nofollow']) ? ' rel="nofollow"' : ''); ?>
3384 + class="king-addons-card-carousel-card-link"></a>
3385 + <?php }
3386 +
3387 + // close card div
3388 + echo '</div>';
3389 + $item_count++;
3390 + } ?>
3391 + </div>
3392 + </div>
3393 + <?php
3394 +
3395 + // pagination
3396 + if ('yes' === $settings['kng_card_carousel_pag_switcher']) {
3397 + echo '<div class="swiper-pagination king-addons-card-carousel-pagination king-addons-card-carousel-pagination-' .
3398 + esc_attr($this_ID) .
3399 + (('yes' === $settings['kng_card_carousel_autoplay_like_ticker_switcher']) ? ' king-addons-card-carousel-autoplay-like-ticker-pag' : '') .
3400 + '"></div>';
3401 + }
3402 +
3403 + // navigation
3404 + if ('yes' === $settings['kng_card_carousel_nav_switcher']) {
3405 +
3406 + echo '<div class="king-addons-card-carousel-nav-prev king-addons-card-carousel-nav-prev-' . esc_attr($this_ID) . ' king-addons-card-carousel-nav">';
3407 + echo '<div class="king-addons-card-carousel-nav-inner">';
3408 + Icons_Manager::render_icon($settings['kng_card_carousel_nav_icon_prev']);
3409 + echo '</div>';
3410 + echo '</div>';
3411 +
3412 + echo '<div class="king-addons-card-carousel-nav-next king-addons-card-carousel-nav-next-' . esc_attr($this_ID) . ' king-addons-card-carousel-nav">';
3413 + echo '<div class="king-addons-card-carousel-nav-inner">';
3414 + Icons_Manager::render_icon($settings['kng_card_carousel_nav_icon_next']);
3415 + echo '</div>';
3416 + echo '</div>';
3417 +
3418 + }
3419 + ?>
3420 + </div>
3421 + <?php
3422 +
3423 + $js_swiper_check_if_DOM_already_loaded = "document.readyState === 'complete'";
3424 + $js_swiper_check_if_DOM_not_already_loaded = "window.addEventListener('load', function () {";
3425 +
3426 + $js_swiper = "new Swiper('.king-addons-card-carousel-items-" . esc_js($this_ID) . "', {";
3427 + $js_swiper .= "direction: 'horizontal',";
3428 +
3429 + $js_swiper .= "slidesPerView: " . Core::jsNumber($settings, 'kng_card_carousel_desktop_cards_per_view', 4) . ",";
3430 + $js_swiper .= "spaceBetween: " . Core::jsNumber($settings, 'kng_card_carousel_desktop_space_between_cards', 30) . ",";
3431 +
3432 + // Responsive breakpoints
3433 + $js_swiper .= 'breakpoints: {0: {slidesPerView: ' .
3434 + Core::jsNumber($settings, 'kng_card_carousel_mobile_cards_per_view', 1) . ', spaceBetween: ' .
3435 + Core::jsNumber($settings, 'kng_card_carousel_mobile_space_between_cards', 30) . '}, ';
3436 + $js_swiper .=
3437 + (Core::jsNumber($settings, 'kng_card_carousel_mobile_breakpoint', 767) + 1) . ': {slidesPerView: ' .
3438 + Core::jsNumber($settings, 'kng_card_carousel_tablet_cards_per_view', 3) . ', spaceBetween: ' .
3439 + Core::jsNumber($settings, 'kng_card_carousel_tablet_space_between_cards', 30) . '}, ';
3440 + $js_swiper .=
3441 + (Core::jsNumber($settings, 'kng_card_carousel_tablet_breakpoint', 1024) + 1) . ': {slidesPerView: ' .
3442 + Core::jsNumber($settings, 'kng_card_carousel_desktop_cards_per_view', 4) . ', spaceBetween: ' .
3443 + Core::jsNumber($settings, 'kng_card_carousel_desktop_space_between_cards', 30) . '}},';
3444 +
3445 + // Scrolling speed
3446 + if ('yes' !== $settings['kng_card_carousel_autoplay_like_ticker_switcher']) {
3447 + $js_swiper .= "speed: " . Core::jsNumber($settings, 'kng_card_carousel_scrolling_speed', 600) . ",";
3448 + } else {
3449 + $js_swiper .= "speed: " . Core::jsNumber($settings, 'kng_card_carousel_autoplay_like_ticker_autoplay_speed', 6000) . ",";
3450 + }
3451 +
3452 + // Pagination
3453 + if ('yes' === $settings['kng_card_carousel_pag_switcher']) {
3454 + $js_swiper .= "pagination: {el: '.king-addons-card-carousel-pagination-" .
3455 + esc_js($this_ID) . "', " .
3456 + ('yes' === $settings['kng_card_carousel_pag_clickable_switcher'] ? 'clickable: true, ' : '');
3457 + if ('yes' === $settings['kng_card_carousel_pag_dynamic_switcher']) {
3458 + $js_swiper .= 'dynamicBullets: true, ';
3459 + $js_swiper .= 'dynamicMainBullets: ' . Core::jsNumber($settings, 'kng_card_carousel_pag_dynamic_number', 1) . ', ';
3460 + }
3461 + $js_swiper .= "type: '" . esc_js($settings['kng_card_carousel_pag_type']) . "'},";
3462 + }
3463 +
3464 + // Navigation
3465 + if ('yes' === $settings['kng_card_carousel_nav_switcher']) {
3466 + $js_swiper .= "navigation: {nextEl: '.king-addons-card-carousel-nav-next-" .
3467 + esc_js($this_ID) . "', prevEl: '.king-addons-card-carousel-nav-prev-" .
3468 + esc_js($this_ID) . "'},";
3469 + }
3470 +
3471 + // Loop
3472 + if ('yes' === $settings['kng_card_carousel_loop_switcher']) {
3473 + $js_swiper .= "loop: true,";
3474 + }
3475 +
3476 + // Rewind
3477 + if ('yes' === $settings['kng_card_carousel_rewind_switcher']) {
3478 + $js_swiper .= "rewind: true,";
3479 + }
3480 +
3481 + // Autoplay
3482 + if ('yes' === $settings['kng_card_carousel_autoplay_switcher']) {
3483 + $js_swiper .= "autoplay: {";
3484 + if ('yes' !== $settings['kng_card_carousel_autoplay_like_ticker_switcher']) {
3485 + $js_swiper .= "delay: " . Core::jsNumber($settings, 'kng_card_carousel_autoplay_delay', 2000) . ",";
3486 + } else {
3487 + $js_swiper .= "delay: 0,";
3488 + }
3489 + $js_swiper .= "disableOnInteraction: " . ('yes' === $settings['kng_card_carousel_autoplay_disableoninteraction_switcher'] ? 'true' : 'false') . ",";
3490 + $js_swiper .= "pauseOnMouseEnter: " . ('yes' === $settings['kng_card_carousel_autoplay_pausedonmouseenter_switcher'] ? 'true' : 'false') . ",";
3491 + $js_swiper .= "reverseDirection: " . ('yes' === $settings['kng_card_carousel_autoplay_reversedirection_switcher'] ? 'true' : 'false') . ",";
3492 + $js_swiper .= "},";
3493 + }
3494 +
3495 + $js_swiper .= "})";
3496 +
3497 + $js_swiper_full = $js_swiper_check_if_DOM_already_loaded . ' ?' . $js_swiper . ' : ' . $js_swiper_check_if_DOM_not_already_loaded . $js_swiper . '; });';
3498 +
3499 + wp_print_inline_script_tag($js_swiper_full);
3500 + /** END: Cards Container ===================== */
3501 + }
3502 +}