PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.49
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.49
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 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Card_Carousel / Card_Carousel.php

Card_Carousel.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.49, at includes/widgets/Card_Carousel/Card_Carousel.php

3,502 lines 131.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
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 = $this->get_settings();
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: " . esc_js($settings['kng_card_carousel_desktop_cards_per_view']) . ",";
3430 $js_swiper .= "spaceBetween: " . esc_js($settings['kng_card_carousel_desktop_space_between_cards']) . ",";
3431
3432 // Responsive breakpoints
3433 $js_swiper .= 'breakpoints: {0: {slidesPerView: ' .
3434 esc_js($settings['kng_card_carousel_mobile_cards_per_view']) . ', spaceBetween: ' .
3435 esc_js($settings['kng_card_carousel_mobile_space_between_cards']) . '}, ';
3436 $js_swiper .=
3437 esc_js(($settings['kng_card_carousel_mobile_breakpoint'] + 1)) . ': {slidesPerView: ' .
3438 esc_js($settings['kng_card_carousel_tablet_cards_per_view']) . ', spaceBetween: ' .
3439 esc_js($settings['kng_card_carousel_tablet_space_between_cards']) . '}, ';
3440 $js_swiper .=
3441 esc_js(($settings['kng_card_carousel_tablet_breakpoint'] + 1)) . ': {slidesPerView: ' .
3442 esc_js($settings['kng_card_carousel_desktop_cards_per_view']) . ', spaceBetween: ' .
3443 esc_js($settings['kng_card_carousel_desktop_space_between_cards']) . '}},';
3444
3445 // Scrolling speed
3446 if ('yes' !== $settings['kng_card_carousel_autoplay_like_ticker_switcher']) {
3447 $js_swiper .= "speed: " . esc_js($settings['kng_card_carousel_scrolling_speed']) . ",";
3448 } else {
3449 $js_swiper .= "speed: " . esc_js($settings['kng_card_carousel_autoplay_like_ticker_autoplay_speed']) . ",";
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: ' . esc_js($settings['kng_card_carousel_pag_dynamic_number'] . ', ');
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: " . esc_js($settings['kng_card_carousel_autoplay_delay']) . ",";
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 }