uicore-elements / includes / utils / carousel-component.php

carousel-component.php in UiCore Elements – Free widgets and templates for Elementor 1.0.6, at includes/utils/carousel-component.php

1,591 lines 42.9 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements\Utils;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Group_Control_Border;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Icons_Manager;
9	use Elementor\Plugin;
10
11	if ( ! defined( 'ABSPATH' ) ) {
12	exit; // Exit if accessed directly
13	}
14
15	/*
16	* Carousel / Slider Component Trait
17	*/
18
19	trait Carousel_Trait {
20
21	/**
22	* Sets all navigation conditions in one place
23	*
24	* @param string $type Control name
25	* @param array\|null $extras (Optional) Terms attributes. ['name' => 'control, 'operator' => '==', 'value' => 'yes'], [..]
26	* @param string\|null $relation (Optional) Accepts 'or' & 'and' values. Default is 'and'
27	* @return array Elementor API Conditions
28	*/
29	function nav_conditions($type, $extras = false, $relation = 'and')
30	{
31	if ($type == 'arrows') {
32	$options = ['arrows', 'arrows-dots', 'arrows-fraction'];
33	} elseif ($type == 'dots') {
34	$options = ['dots', 'arrows-dots'];
35	} elseif ($type == 'fraction') {
36	$options = ['fraction', 'arrows-fraction'];
37	}
38
39	$conditions['terms'][] = [
40	'name' => 'navigation',
41	'operator' => 'in',
42	'value' => $options,
43	];
44	$conditions['relation'] = $relation;
45
46	// Check for extra conditions
47	if($extras != false){
48	foreach ($extras as $extra){
49	$conditions['terms'][] = $extra;
50	}
51	}
52
53	return $conditions;
54	}
55
56	// Navigation Controls
57	function TRAIT_register_navigation_controls()
58	{
59
60	$this->start_controls_section(
61	'section_content_navigation',
62	[
63	'label' => __('Navigation', 'uicore-elements'),
64	]
65	);
66
67	$this->add_control(
68	'navigation',
69	[
70	'label' => __('Navigation', 'uicore-elements'),
71	'type' => Controls_Manager::SELECT,
72	'default' => 'arrows-dots',
73	'options' => [
74	'arrows' => esc_html__('Arrows', 'uicore-elements'),
75	'dots' => esc_html__('Dots', 'uicore-elements'),
76	'fraction' => esc_html__('Fractions', 'uicore-elements'),
77	'arrows-dots' => esc_html__('Arrows and Dots', 'uicore-elements'),
78	'arrows-fraction' => esc_html__('Arrows and Fraction', 'uicore-elements'),
79	'none' => esc_html__('None', 'uicore-elements'),
80	],
81	'multiple' => true,
82	'label_block' => true,
83	'render_type' => 'template',
84	'frontend_available' => true,
85	]
86	);
87	$this->add_control(
88	'hr_arrows',
89	[
90	'label' => esc_html__( 'Arrows', 'uicore-elements' ),
91	'type' => Controls_Manager::HEADING,
92	'separator' => 'before',
93	'conditions' => $this->nav_conditions('arrows'),
94	]
95	);
96	$this->start_controls_tabs(
97	'arrows_tabs'
98	);
99
100	$this->start_controls_tab(
101	'previous_tab',
102	[
103	'label' => esc_html__( 'Previous', 'uicore-elements' ),
104	'conditions' => $this->nav_conditions('arrows'),
105	]
106	);
107
108	$this->add_control(
109	'previous_arrow',
110	[
111	'label' => esc_html__( 'Previous Arrow Icon', 'uicore-elements' ),
112	'type' => Controls_Manager::ICONS,
113	'default' => [
114	'value' => 'fas fa-arrow-left',
115	'library' => 'fa-solid',
116	],
117	'recommended' => [
118	'fa-solid' => [
119	'arrow-alt-circle-left',
120	'caret-square-left',
121	'angle-double-left',
122	'angle-left',
123	'arrow-alt-circle-left',
124	'arrow-left',
125	'caret-left',
126	'caret-square-left',
127	'chevron-circle-left',
128	'chevron-left',
129	'long-arrow-alt-left'
130	]
131	],
132	'label_block' => false,
133	'skin' => 'inline',
134	'conditions' => $this->nav_conditions('arrows'),
135	]
136	);
137	$this->add_responsive_control(
138	'previous_arrow_h_position',
139	[
140	'label' => __('Horizontal Orientation', 'uicore-elements'),
141	'type' => Controls_Manager::CHOOSE,
142	'options' => [
143	'left: 0; right: auto;' => [
144	'title' => __('Left', 'uicore-elements'),
145	'icon' => 'eicon-h-align-left',
146	],
147	'left: 0; right: 0; margin: auto;' => [
148	'title' => __('Center', 'uicore-elements'),
149	'icon' => 'eicon-h-align-center',
150	],
151	'left: auto; right: 0;' => [
152	'title' => __('Right', 'uicore-elements'),
153	'icon' => 'eicon-h-align-right',
154	],
155	],
156	'default' => 'left: 0; right: auto;',
157	'selectors' => [
158	'{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
159	],
160	'conditions' => $this->nav_conditions('arrows'),
161	]
162	);
163	$this->add_responsive_control(
164	'previous_arrow_v_position',
165	[
166	'label' => __('Vertical Orientation', 'uicore-elements'),
167	'type' => Controls_Manager::CHOOSE,
168	'options' => [
169	'top: 0; bottom: auto;' => [
170	'title' => __('Top', 'uicore-elements'),
171	'icon' => 'eicon-v-align-top',
172	],
173	'top: 0; bottom: 0; margin: auto;' => [
174	'title' => __('Center', 'uicore-elements'),
175	'icon' => 'eicon-v-align-middle',
176	],
177	'top: auto; bottom: 0' => [
178	'title' => __('Bottom', 'uicore-elements'),
179	'icon' => 'eicon-v-align-bottom',
180	],
181	],
182	'selectors' => [
183	'{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
184	],
185	'default' => 'top: 0; bottom: 0; margin: auto;',
186	'conditions' => $this->nav_conditions('arrows'),
187	]
188	);
189	$this->add_control(
190	'previous_advanced_position',
191	[
192	'label' => esc_html__( 'Arrow Offset', 'uicore-elements' ),
193	'type' => Controls_Manager::POPOVER_TOGGLE,
194	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
195	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
196	'return_value' => 'yes',
197	'conditions' => $this->nav_conditions('arrows'),
198	]
199	);
200	$this->start_popover();
201
202	$this->add_responsive_control(
203	'prev_arrow_h_offset',
204	[
205	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
206	'type' => Controls_Manager::SLIDER,
207	'size_units' => [ 'px', '%',],
208	'range' => [
209	'px' => [
210	'min' => -200,
211	'max' => 200,
212	'step' => 5,
213	],
214	'%' => [
215	'min' => -100,
216	'max' => 100,
217	],
218	],
219	'selectors' => [
220	'{{WRAPPER}}' => '--ui-e-prev-arrow-h-off:{{SIZE}}{{UNIT}};',
221	],
222	'condition' => [
223	'previous_advanced_position' => 'yes'
224	]
225	]
226	);
227	$this->add_responsive_control(
228	'prev_arrow_v_offset',
229	[
230	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
231	'type' => Controls_Manager::SLIDER,
232	'size_units' => [ 'px', '%',],
233	'range' => [
234	'px' => [
235	'min' => -200,
236	'max' => 200,
237	'step' => 5,
238	],
239	'%' => [
240	'min' => -100,
241	'max' => 100,
242	],
243	],
244	'selectors' => [
245	'{{WRAPPER}}' => '--ui-e-prev-arrow-v-off:{{SIZE}}{{UNIT}};',
246	],
247	'condition' => [
248	'previous_advanced_position' => 'yes'
249	]
250	]
251	);
252	$this->add_responsive_control(
253	'prev_arrow_rotate',
254	[
255	'label' => esc_html__( 'Rotation', 'uicore-elements' ),
256	'type' => Controls_Manager::SLIDER,
257	'size_units' => ['px'],
258	'range' => [
259	'px' => [
260	'min' => 0,
261	'max' => 360,
262	'step' => 5,
263	],
264	],
265	'selectors' => [
266	'{{WRAPPER}} .ui-e-previous > *' => 'rotate:{{SIZE}}deg;',
267	],
268	'condition' => [
269	'previous_advanced_position' => 'yes'
270	]
271	]
272	);
273
274	$this->end_popover();
275
276	$this->end_controls_tab();
277
278	$this->start_controls_tab(
279	'next_tab',
280	[
281	'label' => esc_html__( 'Next', 'uicore-elements' ),
282	'conditions' => $this->nav_conditions('arrows'),
283	]
284	);
285
286	$this->add_control(
287	'next_arrow',
288	[
289	'label' => esc_html__( 'Previous Arrow Icon', 'uicore-elements' ),
290	'type' => Controls_Manager::ICONS,
291	'default' => [
292	'value' => 'fas fa-arrow-right',
293	'library' => 'fa-solid',
294	],
295	'recommended' => [
296	'fa-solid' => [
297	'arrow-alt-circle-right',
298	'caret-square-right',
299	'angle-double-right',
300	'angle-right',
301	'arrow-alt-circle-right',
302	'arrow-right',
303	'caret-right',
304	'caret-square-right',
305	'chevron-circle-right',
306	'chevron-right',
307	'long-arrow-alt-right'
308	]
309	],
310	'label_block' => false,
311	'skin' => 'inline',
312	'conditions' => $this->nav_conditions('arrows'),
313	]
314	);
315	$this->add_responsive_control(
316	'next_arrow_h_position',
317	[
318	'label' => __('Horizontal Orientation', 'uicore-elements'),
319	'type' => Controls_Manager::CHOOSE,
320	'options' => [
321	'left: 0; right: auto;' => [
322	'title' => __('Left', 'uicore-elements'),
323	'icon' => 'eicon-h-align-left',
324	],
325	'left: 0; right: 0; margin: auto;' => [
326	'title' => __('Center', 'uicore-elements'),
327	'icon' => 'eicon-h-align-center',
328	],
329	'left: auto; right: 0;' => [
330	'title' => __('Right', 'uicore-elements'),
331	'icon' => 'eicon-h-align-right',
332	],
333	],
334	'default' => 'left: auto; right: 0;',
335	'selectors' => [
336	'{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
337	],
338	'conditions' => $this->nav_conditions('arrows'),
339	]
340	);
341	$this->add_responsive_control(
342	'next_arrow_v_position',
343	[
344	'label' => __('Vertical Orientation', 'uicore-elements'),
345	'type' => Controls_Manager::CHOOSE,
346	'options' => [
347	'top: 0; bottom: auto;' => [
348	'title' => __('Top', 'uicore-elements'),
349	'icon' => 'eicon-v-align-top',
350	],
351	'top: 0; bottom: 0; margin: auto;' => [
352	'title' => __('Center', 'uicore-elements'),
353	'icon' => 'eicon-v-align-middle',
354	],
355	'top: auto; bottom: 0' => [
356	'title' => __('Bottom', 'uicore-elements'),
357	'icon' => 'eicon-v-align-bottom',
358	],
359	],
360	'selectors' => [
361	'{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
362	],
363	'default' => 'top: 0; bottom: 0; margin: auto;',
364	'conditions' => $this->nav_conditions('arrows'),
365	]
366	);
367	$this->add_control(
368	'next_advanced_position',
369	[
370	'label' => esc_html__( 'Arrow Offset', 'uicore-elements' ),
371	'type' => Controls_Manager::POPOVER_TOGGLE,
372	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
373	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
374	'return_value' => 'yes',
375	'conditions' => $this->nav_conditions('arrows'),
376	]
377	);
378	$this->start_popover();
379	$this->add_responsive_control(
380	'next_arrow_h_offset',
381	[
382	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
383	'type' => Controls_Manager::SLIDER,
384	'size_units' => [ 'px', '%',],
385	'range' => [
386	'px' => [
387	'min' => -200,
388	'max' => 200,
389	'step' => 5,
390	],
391	'%' => [
392	'min' => -100,
393	'max' => 100,
394	],
395	],
396	'selectors' => [
397	'{{WRAPPER}}' => '--ui-e-next-arrow-h-off:{{SIZE}}{{UNIT}};',
398	],
399	'condition' => [
400	'next_advanced_position' => 'yes'
401	]
402	]
403	);
404	$this->add_responsive_control(
405	'next_arrow_v_offset',
406	[
407	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
408	'type' => Controls_Manager::SLIDER,
409	'size_units' => [ 'px', '%',],
410	'range' => [
411	'px' => [
412	'min' => -200,
413	'max' => 200,
414	'step' => 5,
415	],
416	'%' => [
417	'min' => -100,
418	'max' => 100,
419	],
420	],
421	'selectors' => [
422	'{{WRAPPER}}' => '--ui-e-next-arrow-v-off:{{SIZE}}{{UNIT}};',
423	],
424	'condition' => [
425	'next_advanced_position' => 'yes'
426	]
427	]
428	);
429	$this->add_responsive_control(
430	'next_arrow_rotate',
431	[
432	'label' => esc_html__( 'Rotation', 'uicore-elements' ),
433	'type' => Controls_Manager::SLIDER,
434	'size_units' => ['px'],
435	'range' => [
436	'px' => [
437	'min' => 0,
438	'max' => 360,
439	'step' => 5,
440	],
441	],
442	'selectors' => [
443	'{{WRAPPER}} .ui-e-next > *' => 'rotate:{{SIZE}}deg;',
444	],
445	'condition' => [
446	'previous_advanced_position' => 'yes'
447	]
448	]
449	);
450
451	$this->end_popover();
452
453	$this->end_controls_tab();
454
455	$this->end_controls_tabs();
456
457	$this->add_control(
458	'hr_fraction',
459	[
460	'label' => esc_html__( 'Fraction', 'uicore-elements' ),
461	'type' => Controls_Manager::HEADING,
462	'separator' => 'before',
463	'conditions' => $this->nav_conditions('fraction'),
464	]
465	);
466	$this->add_responsive_control(
467	'fraction_h_position',
468	[
469	'label' => __('Horizontal Orientation', 'uicore-elements'),
470	'type' => Controls_Manager::CHOOSE,
471	'options' => [
472	'left: 0; right: auto;' => [
473	'title' => __('Left', 'uicore-elements'),
474	'icon' => 'eicon-h-align-left',
475	],
476	'left: 0; right: 0; margin: auto;' => [
477	'title' => __('Center', 'uicore-elements'),
478	'icon' => 'eicon-h-align-center',
479	],
480	'left: auto; right: 0;' => [
481	'title' => __('Right', 'uicore-elements'),
482	'icon' => 'eicon-h-align-right',
483	],
484	],
485	'default' => 'left: 0; right: auto;',
486	'selectors' => [
487	'{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
488	],
489	'conditions' => $this->nav_conditions('fraction'),
490	]
491	);
492	$this->add_responsive_control(
493	'fraction_v_position',
494	[
495	'label' => __('Vertical Orientation', 'uicore-elements'),
496	'type' => Controls_Manager::CHOOSE,
497	'options' => [
498	'top: -25px; bottom: auto;' => [
499	'title' => __('Top', 'uicore-elements'),
500	'icon' => 'eicon-v-align-top',
501	],
502	'top: 0; bottom: 0; margin: auto;' => [
503	'title' => __('Center', 'uicore-elements'),
504	'icon' => 'eicon-v-align-middle',
505	],
506	'top: auto; bottom: -25px;' => [
507	'title' => __('Bottom', 'uicore-elements'),
508	'icon' => 'eicon-v-align-bottom',
509	],
510	],
511	'selectors' => [
512	'{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
513	],
514	'default' => 'bottom: -25px;',
515	'conditions' => $this->nav_conditions('fraction'),
516	]
517	);
518	$this->add_control(
519	'fraction_offset_toggle',
520	[
521	'label' => esc_html__( 'Fraction Offset', 'uicore-elements' ),
522	'type' => Controls_Manager::POPOVER_TOGGLE,
523	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
524	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
525	'return_value' => 'yes',
526	'conditions' => $this->nav_conditions('fraction'),
527	]
528	);
529	$this->start_popover();
530	$this->add_responsive_control(
531	'fraction_h_offset',
532	[
533	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
534	'type' => Controls_Manager::SLIDER,
535	'size_units' => [ 'px', '%',],
536	'range' => [
537	'px' => [
538	'min' => -80,
539	'max' => 80,
540	'step' => 5,
541	],
542	'%' => [
543	'min' => -100,
544	'max' => 100,
545	],
546	],
547	'selectors' => [
548	'{{WRAPPER}}' => '--ui-e-fraction-h-off:{{SIZE}}{{UNIT}};',
549	],
550	'condition' => [
551	'fraction_offset_toggle' => 'yes'
552	]
553	]
554	);
555	$this->add_responsive_control(
556	'fraction_v_offset',
557	[
558	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
559	'type' => Controls_Manager::SLIDER,
560	'size_units' => [ 'px', '%',],
561	'range' => [
562	'px' => [
563	'min' => -80,
564	'max' => 80,
565	'step' => 5,
566	],
567	'%' => [
568	'min' => -100,
569	'max' => 100,
570	],
571	],
572	'selectors' => [
573	'{{WRAPPER}}' => '--ui-e-fraction-v-off:{{SIZE}}{{UNIT}};',
574	],
575	'condition' => [
576	'fraction_offset_toggle' => 'yes'
577	]
578	]
579	);
580
581	$this->end_popover();
582
583	$this->add_control(
584	'hr_dots',
585	[
586	'label' => esc_html__( 'Dots', 'uicore-elements' ),
587	'type' => Controls_Manager::HEADING,
588	'separator' => 'before',
589	'conditions' => $this->nav_conditions('dots'),
590	]
591	);
592	$this->add_responsive_control(
593	'dots_h_position',
594	[
595	'label' => __('Horizontal Orientation', 'uicore-elements'),
596	'type' => Controls_Manager::CHOOSE,
597	'options' => [
598	'left: 0; right: auto;' => [
599	'title' => __('Left', 'uicore-elements'),
600	'icon' => 'eicon-h-align-left',
601	],
602	'left: 0; right: 0; margin: auto;' => [
603	'title' => __('Center', 'uicore-elements'),
604	'icon' => 'eicon-h-align-center',
605	],
606	'left: auto; right: 0;' => [
607	'title' => __('Right', 'uicore-elements'),
608	'icon' => 'eicon-h-align-right',
609	],
610	],
611	'default' => 'left: 0; right: 0; margin: auto;',
612	'selectors' => [
613	'{{WRAPPER}} .ui-e-dots' => '{{VALUE}};'
614	],
615	'conditions' => $this->nav_conditions('dots'),
616	]
617	);
618	$this->add_responsive_control(
619	'dots_v_position',
620	[
621	'label' => __('Vertical Orientation', 'uicore-elements'),
622	'type' => Controls_Manager::CHOOSE,
623	'options' => [
624	'top: -25px; bottom: auto;' => [
625	'title' => __('Top', 'uicore-elements'),
626	'icon' => 'eicon-v-align-top',
627	],
628	'top: 0; bottom: 0; margin: auto' => [
629	'title' => __('Center', 'uicore-elements'),
630	'icon' => 'eicon-v-align-middle',
631	],
632	'top: auto; bottom: -25px' => [
633	'title' => __('Bottom', 'uicore-elements'),
634	'icon' => 'eicon-v-align-bottom',
635	],
636	],
637	'selectors' => [
638	'{{WRAPPER}} .ui-e-dots' => '{{VALUE}}'
639	],
640	'default' => 'bottom: -25px;',
641	'conditions' => $this->nav_conditions('dots'),
642	]
643	);
644	$this->add_control(
645	'dots_advanced',
646	[
647	'label' => esc_html__( 'Dots Offset', 'uicore-elements' ),
648	'type' => Controls_Manager::POPOVER_TOGGLE,
649	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
650	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
651	'return_value' => 'yes',
652	'conditions' => $this->nav_conditions('dots'),
653	]
654	);
655	$this->start_popover();
656	$this->add_responsive_control(
657	'dots_h_offset',
658	[
659	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
660	'type' => Controls_Manager::SLIDER,
661	'size_units' => [ 'px', '%',],
662	'range' => [
663	'px' => [
664	'min' => -100,
665	'max' => 100,
666	'step' => 5,
667	],
668	'%' => [
669	'min' => -100,
670	'max' => 100,
671	],
672	],
673	'selectors' => [
674	'{{WRAPPER}}' => '--ui-e-dots-h-off:{{SIZE}}{{UNIT}};',
675	],
676	'condition' => [
677	'dots_advanced' => 'yes'
678	]
679	]
680	);
681	$this->add_responsive_control(
682	'dots_v_offset',
683	[
684	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
685	'type' => Controls_Manager::SLIDER,
686	'size_units' => [ 'px', '%',],
687	'range' => [
688	'px' => [
689	'min' => -100,
690	'max' => 100,
691	'step' => 5,
692	],
693	'%' => [
694	'min' => -100,
695	'max' => 100,
696	],
697	],
698	'selectors' => [
699	'{{WRAPPER}}' => '--ui-e-dots-v-off:{{SIZE}}{{UNIT}};',
700	],
701	'condition' => [
702	'dots_advanced' => 'yes'
703	]
704	]
705	);
706	$this->add_responsive_control(
707	'dots_rotate',
708	[
709	'label' => esc_html__( 'Rotation', 'uicore-elements' ),
710	'type' => Controls_Manager::SLIDER,
711	'size_units' => [ 'px'],
712	'range' => [
713	'px' => [
714	'min' => 0,
715	'max' => 360,
716	'step' => 5,
717	],
718	],
719	'selectors' => [
720	'{{WRAPPER}} .ui-e-dots' => 'rotate: {{SIZE}}deg;',
721	],
722	'condition' => [
723	'dots_advanced' => 'yes'
724	]
725	]
726	);
727	$this->end_popover();
728
729	$this->end_controls_section();
730	}
731	function TRAIT_register_carousel_settings_controls()
732	{
733	$this->add_control(
734	'animation_style',
735	[
736	'label' => __('Animation', 'uicore-elements'),
737	'type' => Controls_Manager::SELECT,
738	'default' => 'circular',
739	'options' => [
740	'circular' => esc_html__('Circular', 'uicore-elements'),
741	'fade_blur' => esc_html__('Fade Blur', 'uicore-elements'),
742	],
743	'prefix_class' => 'ui-e-animation-',
744	'render_type' => 'template',
745	'frontend_available' => true,
746	]
747	);
748	$this->add_responsive_control(
749	'slides_per_view',
750	[
751	'label' => __( 'Slides per View', 'uicore-elements' ),
752	'type' => Controls_Manager::SELECT,
753	'desktop_default' => 3,
754	'tablet_default' => 2,
755	'mobile_default' => 1,
756	'options' => [
757	1 => '1',
758	2 => '2',
759	3 => '3',
760	4 => '4',
761	5 => '5',
762	6 => '6',
763	7 => '7',
764	8 => '8',
765	],
766	'render_type' => 'template',
767	'frontend_available' => true,
768	'condition' => [
769	'animation_style!' => ['horizontal']
770	]
771	]
772	);
773	$this->add_control(
774	'show_hidden',
775	[
776	'label' => esc_html__( 'Show Hidden Items', 'uicore-elements' ),
777	'type' => \Elementor\Controls_Manager::SELECT,
778	'default' => 'hidden',
779	'options' => [
780	'hidden' => esc_html__( 'Hidden', 'uicore-elements' ),
781	'left' => esc_html__( 'Show Left', 'uicore-elements' ),
782	'right' => esc_html__( 'Show Right', 'uicore-elements' ),
783	],
784	'condition' => [
785	'animation_style' => ['fade_blur', 'circular']
786	],
787	'frontend_available' => true,
788	]
789	);
790	$this->add_control(
791	'fade_edges',
792	[
793	'label' => __('Fade Edges', 'uicore-elements'),
794	'type' => Controls_Manager::SWITCHER,
795	'prefix_class' => 'ui-e-fade-edges-',
796	]
797	);
798	// Add warning control with 'warning' type
799	$this->add_control(
800	'fade_edges_alert',
801	[
802	'type' => Controls_Manager::ALERT,
803	'alert_type' => 'warning',
804	'heading' => esc_html__( 'Careful', 'uicore-elements'),
805	'content' => esc_html__( 'Fade edges will hide your navigation if outside the carousel wrapper', 'uicore-elements' ),
806	'condition' => [
807	'fade_edges' => 'yes',
808	],
809	]
810	);
811	// Kept for now to see if users will request it
812	// $this->add_responsive_control(
813	// 'slide_position',
814	// [
815	// 'label' => __('Active Slide Alignment', 'uicore-elements'),
816	// 'type' => Controls_Manager::CHOOSE,
817	// 'options' => [
818	// 'left' => [
819	// 'title' => __('Left', 'uicore-elements'),
820	// 'icon' => 'eicon-h-align-left',
821	// ],
822	// 'center' => [
823	// 'title' => __('Center', 'uicore-elements'),
824	// 'icon' => 'eicon-h-align-center',
825	// ],
826	// // right alingment not supported by swiper
827	// ],
828	// 'default' => 'center',
829	// 'frontend_available' => true,
830	// ]
831	// );
832	$this->add_control(
833	'autoplay',
834	[
835	'label' => __('Autoplay', 'uicore-elements'),
836	'type' => Controls_Manager::SWITCHER,
837	'return_value' => 'yes',
838	'frontend_available' => true,
839	]
840	);
841	$this->add_control(
842	'autoplay_speed',
843	[
844	'label' => esc_html__('Autoplay Speed', 'uicore-elements'),
845	'type' => Controls_Manager::NUMBER,
846	'default' => 5000,
847	'frontend_available' => true,
848	'condition' => [
849	'autoplay' => 'yes',
850	]
851	]
852	);
853	$this->add_control(
854	'pause_on_hover',
855	[
856	'label' => esc_html__('Pause on Hover', 'uicore-elements'),
857	'type' => Controls_Manager::SWITCHER,
858	'return_value' => 'true',
859	'frontend_available' => true,
860	'condition' => [
861	'autoplay' => 'yes',
862	]
863	]
864	);
865	$this->add_control(
866	'grab_cursor',
867	[
868	'label' => __('Grab Cursor', 'uicore-elements'),
869	'type' => Controls_Manager::SWITCHER,
870	'default' => 'yes',
871	'frontend_available' => true,
872	]
873	);
874	$this->add_control(
875	'loop',
876	[
877	'label' => __('Loop', 'uicore-elements'),
878	'type' => Controls_Manager::SWITCHER,
879	'default' => 'true',
880	'return_value' => 'true',
881	'frontend_available' => true,
882	]
883	);
884	$this->add_control(
885	'overflow_container',
886	[
887	'label' => esc_html__( 'Overflow Container', 'uicore-elements' ),
888	'type' => \Elementor\Controls_Manager::HIDDEN,
889	'default' => Plugin::$instance->experiments->is_feature_active('container') ? 'container' : 'column',
890	'frontend_available' => true, // return on the JS the container type (flexbox or column) for overflow
891	]
892	);
893	$this->add_control(
894	'observer',
895	[
896	'label' => __('Observer', 'uicore-elements'),
897	'description' => __('Use it when the carousel is placed in a hidden place (ex: tab, accordion).', 'uicore-elements'),
898	'type' => Controls_Manager::SWITCHER,
899	'return_value' => 'yes',
900	'frontend_available' => true,
901	]
902	);
903	}
904	//Navigation Style Controls
905	function TRAIT_register_navigation_style_controls()
906	{
907
908	$this->start_controls_section(
909	'section_style_navigation',
910	[
911	'label' => esc_html__('Navigation', 'uicore-elements'),
912	'tab' => Controls_Manager::TAB_STYLE,
913	'conditions' => [
914	'terms' => [
915	[
916	'name' => 'navigation',
917	'operator' => '!=',
918	'value' => '',
919	],
920	],
921	],
922	]
923	);
924
925	$this->add_control(
926	'arrows_heading',
927	[
928	'label' => __('Arrows', 'uicore-elements'),
929	'type' => Controls_Manager::HEADING,
930	'conditions' => $this->nav_conditions('arrows'),
931	]
932	);
933
934	$this->start_controls_tabs('tabs_navigation_arrows_style');
935
936	$this->start_controls_tab(
937	'tabs_nav_arrows_normal',
938	[
939	'label' => __('Normal', 'uicore-elements'),
940	'conditions' => $this->nav_conditions('arrows'),
941	]
942	);
943
944	$this->add_control(
945	'arrows_color',
946	[
947	'label' => __('Color', 'uicore-elements'),
948	'type' => Controls_Manager::COLOR,
949	'selectors' => [
950	'{{WRAPPER}} .ui-e-button i' => 'color: {{VALUE}}',
951	'{{WRAPPER}} .ui-e-button svg' => 'fill: {{VALUE}}',
952	],
953	'conditions' => $this->nav_conditions('arrows'),
954	]
955	);
956	$this->add_control(
957	'arrows_background',
958	[
959	'label' => __('Background', 'uicore-elements'),
960	'type' => Controls_Manager::COLOR,
961	'selectors' => [
962	'{{WRAPPER}} .ui-e-button' => 'background-color: {{VALUE}}',
963	],
964	'conditions' => $this->nav_conditions('arrows'),
965	]
966	);
967	$this->add_group_control(
968	Group_Control_Border::get_type(),
969	[
970	'name' => 'nav_arrows_border',
971	'selector' => '{{WRAPPER}} .ui-e-button',
972	'conditions' => $this->nav_conditions('arrows'),
973	]
974	);
975	$this->add_control(
976	'arrows_radius',
977	[
978	'label' => __('Border Radius', 'uicore-elements'),
979	'type' => Controls_Manager::DIMENSIONS,
980	'size_units' => ['px', '%'],
981	'selectors' => [
982	'{{WRAPPER}} .ui-e-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
983	],
984	'conditions' => $this->nav_conditions('arrows'),
985	]
986	);
987	$this->add_control(
988	'arrows_padding',
989	[
990	'label' => esc_html__('Padding', 'uicore-elements'),
991	'type' => Controls_Manager::DIMENSIONS,
992	'size_units' => ['px', 'em', '%'],
993	'selectors' => [
994	'{{WRAPPER}} .ui-e-button' => 'padding: {{TOP}}{{UNIT \|\| 0}} {{RIGHT}}{{UNIT \|\| 0}} {{BOTTOM}}{{UNIT \|\| 0}} {{LEFT}}{{UNIT \|\| 0}};',
995	],
996	'conditions' => $this->nav_conditions('arrows'),
997	]
998	);
999	$this->add_responsive_control(
1000	'arrows_size',
1001	[
1002	'label' => __('Size', 'uicore-elements'),
1003	'type' => Controls_Manager::SLIDER,
1004	'range' => [
1005	'px' => [
1006	'min' => 10,
1007	'max' => 100,
1008	],
1009	],
1010	'default' => [
1011	'size' => 16,
1012	'unit' => 'px'
1013	],
1014	'selectors' => [
1015	'{{WRAPPER}} .ui-e-button i' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1016	'{{WRAPPER}} .ui-e-button svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
1017	],
1018	'conditions' => $this->nav_conditions('arrows'),
1019	]
1020	);
1021	$this->add_group_control(
1022	Group_Control_Box_Shadow::get_type(),
1023	[
1024	'name' => 'arrows_box_shadow',
1025	'selector' => '{{WRAPPER}} .ui-e-button',
1026	'conditions' => $this->nav_conditions('arrows'),
1027	]
1028	);
1029
1030	$this->end_controls_tab();
1031
1032	$this->start_controls_tab(
1033	'tabs_nav_arrows_hover',
1034	[
1035	'label' => __('Hover', 'uicore-elements'),
1036	'conditions' => $this->nav_conditions('arrows'),
1037	]
1038	);
1039
1040	$this->add_control(
1041	'arrows_hover_color',
1042	[
1043	'label' => __('Color', 'uicore-elements'),
1044	'type' => Controls_Manager::COLOR,
1045	'selectors' => [
1046	'{{WRAPPER}} .ui-e-button:hover i' => 'color: {{VALUE}}',
1047	'{{WRAPPER}} .ui-e-button:hover svg' => 'fill: {{VALUE}}',
1048	],
1049	'conditions' => $this->nav_conditions('arrows'),
1050	]
1051	);
1052	$this->add_control(
1053	'arrows_hover_background',
1054	[
1055	'label' => __('Background', 'uicore-elements'),
1056	'type' => Controls_Manager::COLOR,
1057	'selectors' => [
1058	'{{WRAPPER}} .ui-e-button:hover' => 'background-color: {{VALUE}}',
1059
1060	],
1061	'conditions' => $this->nav_conditions('arrows'),
1062	]
1063	);
1064	$this->add_control(
1065	'nav_arrows_hover_border_color',
1066	[
1067	'label' => __('Border Color', 'uicore-elements'),
1068	'type' => Controls_Manager::COLOR,
1069	'selectors' => [
1070	'{{WRAPPER}} .ui-e-button:hover' => 'border-color: {{VALUE}};',
1071	],
1072	'conditions' => $this->nav_conditions('arrows'),
1073	]
1074	);
1075	$this->add_group_control(
1076	Group_Control_Box_Shadow::get_type(),
1077	[
1078	'name' => 'arrows_hover_box_shadow',
1079	'selector' => '{{WRAPPER}} .ui-e-button:hover',
1080	'conditions' => $this->nav_conditions('arrows'),
1081	]
1082	);
1083
1084	$this->end_controls_tab();
1085
1086	$this->end_controls_tabs();
1087
1088	$this->add_control(
1089	'hr_1',
1090	[
1091	'type' => Controls_Manager::DIVIDER,
1092	'conditions' => $this->nav_conditions('dots'),
1093	]
1094	);
1095	$this->add_control(
1096	'dots_heading',
1097	[
1098	'label' => __('Dots', 'uicore-elements'),
1099	'type' => Controls_Manager::HEADING,
1100	'conditions' => $this->nav_conditions('dots'),
1101	]
1102	);
1103
1104	$this->start_controls_tabs('tabs_navigation_dots_style');
1105
1106	$this->start_controls_tab(
1107	'tabs_nav_dots_normal',
1108	[
1109	'label' => __('Normal', 'uicore-elements'),
1110	'conditions' => $this->nav_conditions('dots'),
1111	]
1112	);
1113
1114	$this->add_control(
1115	'dots_color',
1116	[
1117	'label' => __('Color', 'uicore-elements'),
1118	'type' => Controls_Manager::COLOR,
1119	'selectors' => [
1120	'{{WRAPPER}} .ui-e-dots .dot' => 'background-color: {{VALUE}}',
1121	],
1122	'conditions' => $this->nav_conditions('dots'),
1123	]
1124	);
1125	$this->add_control(
1126	'dots_space_between',
1127	[
1128	'label' => __('Space Between Dots', 'uicore-elements'),
1129	'type' => Controls_Manager::SLIDER,
1130	'selectors' => [
1131	'{{WRAPPER}} .ui-e-dots .dot' => 'margin: 0 {{SIZE}}{{UNIT}};',
1132	],
1133	'range' => [
1134	'px' =>[
1135	'min' => 0,
1136	'max' => 15,
1137	'step' => 1,
1138	]
1139	],
1140	'default' => [
1141	'unit' => 'px',
1142	'size' => 8,
1143	],
1144	'conditions' => $this->nav_conditions('dots'),
1145	]
1146	);
1147	$this->add_responsive_control(
1148	'dots_size',
1149	[
1150	'label' => __('Size', 'uicore-elements'),
1151	'type' => Controls_Manager::SLIDER,
1152	'range' => [
1153	'px' => [
1154	'min' => 5,
1155	'max' => 20,
1156	],
1157	],
1158	'default' => [
1159	'unit' => 'px',
1160	'size' => 8,
1161	],
1162	'selectors' => [
1163	'{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1164	],
1165	'conditions' => $this->nav_conditions(
1166	'dots',
1167	[
1168	[
1169	'name' => 'advanced_dots_size',
1170	'operator' => '===',
1171	'value' => '',
1172	]
1173	]
1174	),
1175	]
1176	);
1177	$this->add_control(
1178	'advanced_dots_size',
1179	[
1180	'label' => __('Advanced Size', 'uicore-elements'),
1181	'type' => Controls_Manager::SWITCHER,
1182	'conditions' => $this->nav_conditions('dots'),
1183	]
1184	);
1185	$this->add_responsive_control(
1186	'advanced_dots_width',
1187	[
1188	'label' => __('Width', 'uicore-elements'),
1189	'type' => Controls_Manager::SLIDER,
1190	'range' => [
1191	'px' => [
1192	'min' => 1,
1193	'max' => 50,
1194	],
1195	],
1196	'default' => [
1197	'size' => 6,
1198	'unit' => 'px',
1199	],
1200	'selectors' => [
1201	'{{WRAPPER}} .ui-e-dots .dot' => 'width: {{SIZE}}{{UNIT}};',
1202	],
1203	'conditions' => $this->nav_conditions(
1204	'dots',
1205	[
1206	[
1207	'name' => 'advanced_dots_size',
1208	'operator' => '==',
1209	'value' => 'yes',
1210	]
1211	]
1212	),
1213	]
1214	);
1215	$this->add_responsive_control(
1216	'advanced_dots_height',
1217	[
1218	'label' => __('Height', 'uicore-elements'),
1219	'type' => Controls_Manager::SLIDER,
1220	'range' => [
1221	'px' => [
1222	'min' => 1,
1223	'max' => 50,
1224	],
1225	],
1226	'default' => [
1227	'size' => 6,
1228	'unit' => 'px',
1229	],
1230	'selectors' => [
1231	'{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}};',
1232	],
1233	'conditions' => $this->nav_conditions(
1234	'dots',
1235	[
1236	[
1237	'name' => 'advanced_dots_size',
1238	'operator' => '==',
1239	'value' => 'yes',
1240	]
1241	]
1242	),
1243	]
1244	);
1245	$this->add_control(
1246	'advanced_dots_radius',
1247	[
1248	'label' => esc_html__('Border Radius', 'uicore-elements'),
1249	'type' => Controls_Manager::DIMENSIONS,
1250	'size_units' => ['px', '%'],
1251	'selectors' => [
1252	'{{WRAPPER}} .ui-e-dots .dot' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1253	],
1254	'conditions' => $this->nav_conditions(
1255	'dots',
1256	[
1257	[
1258	'name' => 'advanced_dots_size',
1259	'operator' => '==',
1260	'value' => 'yes',
1261	]
1262	]
1263	),
1264	]
1265	);
1266	$this->add_group_control(
1267	Group_Control_Box_Shadow::get_type(),
1268	[
1269	'name' => 'dots_box_shadow',
1270	'selector' => '{{WRAPPER}} .ui-e-dots .dot',
1271	'conditions' => $this->nav_conditions('dots'),
1272	]
1273	);
1274
1275	$this->end_controls_tab();
1276
1277	$this->start_controls_tab(
1278	'tabs_nav_dots_active',
1279	[
1280	'label' => __('Active', 'uicore-elements'),
1281	'conditions' => $this->nav_conditions('dots'),
1282	]
1283	);
1284
1285	$this->add_control(
1286	'active_dot_color',
1287	[
1288	'label' => __('Color', 'uicore-elements'),
1289	'type' => Controls_Manager::COLOR,
1290	'selectors' => [
1291	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'background-color: {{VALUE}}',
1292	],
1293	'conditions' => $this->nav_conditions('dots'),
1294	]
1295	);
1296	$this->add_responsive_control(
1297	'active_dots_size',
1298	[
1299	'label' => __('Size', 'uicore-elements'),
1300	'type' => Controls_Manager::SLIDER,
1301	'range' => [
1302	'px' => [
1303	'min' => 5,
1304	'max' => 20,
1305	],
1306	],
1307	'selectors' => [
1308	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1309	],
1310	'conditions' => $this->nav_conditions(
1311	'dots',
1312	[
1313	[
1314	'name' => 'advanced_dots_size',
1315	'operator' => '===',
1316	'value' => '',
1317	]
1318	]
1319	),
1320	]
1321	);
1322	$this->add_responsive_control(
1323	'active_advanced_dots_width',
1324	[
1325	'label' => __('Width', 'uicore-elements'),
1326	'type' => Controls_Manager::SLIDER,
1327	'range' => [
1328	'px' => [
1329	'min' => 1,
1330	'max' => 50,
1331	],
1332	],
1333	'default' => [
1334	'size' => 15,
1335	'unit' => 'px',
1336	],
1337	'selectors' => [
1338	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'width: {{SIZE}}{{UNIT}};',
1339	],
1340	'conditions' => $this->nav_conditions(
1341	'dots',
1342	[
1343	[
1344	'name' => 'advanced_dots_size',
1345	'operator' => '==',
1346	'value' => 'yes',
1347	]
1348	]
1349	),
1350	]
1351	);
1352	$this->add_responsive_control(
1353	'active_advanced_dots_height',
1354	[
1355	'label' => __('Height', 'uicore-elements'),
1356	'type' => Controls_Manager::SLIDER,
1357	'range' => [
1358	'px' => [
1359	'min' => 1,
1360	'max' => 50,
1361	],
1362	],
1363	'default' => [
1364	'size' => 6,
1365	'unit' => 'px',
1366	],
1367	'selectors' => [
1368	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}};',
1369	],
1370	'conditions' => $this->nav_conditions(
1371	'dots',
1372	[
1373	[
1374	'name' => 'advanced_dots_size',
1375	'operator' => '==',
1376	'value' => 'yes',
1377	]
1378	]
1379	),
1380	]
1381	);
1382	$this->add_control(
1383	'active_advanced_dots_radius',
1384	[
1385	'label' => esc_html__('Border Radius', 'uicore-elements'),
1386	'type' => Controls_Manager::DIMENSIONS,
1387	'size_units' => ['px', '%'],
1388	'selectors' => [
1389	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1390	],
1391	'conditions' => $this->nav_conditions(
1392	'dots',
1393	[
1394	[
1395	'name' => 'advanced_dots_size',
1396	'operator' => '==',
1397	'value' => 'yes',
1398	]
1399	]
1400	),
1401	]
1402	);
1403	$this->add_group_control(
1404	Group_Control_Box_Shadow::get_type(),
1405	[
1406	'name' => 'dots_active_box_shadow',
1407	'selector' => '{{WRAPPER}} .ui-e-dots .dot.is-selected',
1408	'conditions' => $this->nav_conditions('dots'),
1409	]
1410	);
1411
1412	$this->end_controls_tab();
1413
1414	$this->end_controls_tabs();
1415
1416	$this->add_control(
1417	'hr_2',
1418	[
1419	'type' => Controls_Manager::DIVIDER,
1420	'conditions' => $this->nav_conditions('fraction'),
1421	]
1422	);
1423	$this->add_control(
1424	'fraction_heading',
1425	[
1426	'label' => __('Fractions', 'uicore-elements'),
1427	'type' => Controls_Manager::HEADING,
1428	'conditions' => $this->nav_conditions('fraction'),
1429	]
1430	);
1431	$this->add_control(
1432	'fraction_bg_color',
1433	[
1434	'label' => __('Background Color', 'uicore-elements'),
1435	'type' => Controls_Manager::COLOR,
1436	'selectors' => [
1437	'{{WRAPPER}} .ui-e-fraction' => 'background-color: {{VALUE}}',
1438	],
1439	'conditions' => $this->nav_conditions('fraction'),
1440	]
1441	);
1442	$this->add_control(
1443	'fraction_padding',
1444	[
1445	'label' => esc_html__('Padding', 'uicore-elements'),
1446	'type' => Controls_Manager::DIMENSIONS,
1447	'size_units' => ['px', 'em', '%'],
1448	'selectors' => [
1449	'{{WRAPPER}} .ui-e-fraction' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1450	],
1451	'conditions' => $this->nav_conditions('fraction'),
1452	]
1453	);
1454	$this->add_control(
1455	'fraction_radius',
1456	[
1457	'label' => esc_html__('Border Radius', 'uicore-elements'),
1458	'type' => Controls_Manager::DIMENSIONS,
1459	'size_units' => ['px', 'em', '%'],
1460	'selectors' => [
1461	'{{WRAPPER}} .ui-e-fraction' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1462	],
1463	'conditions' => $this->nav_conditions('fraction'),
1464	]
1465	);
1466	$this->add_group_control(
1467	Group_Control_Border::get_type(),
1468	[
1469	'name' => 'fraction_border',
1470	'selector' => '{{WRAPPER}} .ui-e-fraction',
1471	'conditions' => $this->nav_conditions('fraction'),
1472	]
1473	);
1474	$this->add_control(
1475	'fraction_color',
1476	[
1477	'label' => __('Color', 'uicore-elements'),
1478	'type' => Controls_Manager::COLOR,
1479	'selectors' => [
1480	'{{WRAPPER}} .ui-e-fraction, {{WRAPPER}} .ui-e-fraction .ui-e-total' => 'color: {{VALUE}}',
1481	],
1482	'conditions' => $this->nav_conditions('fraction'),
1483	]
1484	);
1485	$this->add_control(
1486	'active_fraction_color',
1487	[
1488	'label' => __('Active Color', 'uicore-elements'),
1489	'type' => Controls_Manager::COLOR,
1490	'selectors' => [
1491	'{{WRAPPER}} .ui-e-fraction .swiper-pagination-current' => 'color: {{VALUE}}',
1492	],
1493	'conditions' => $this->nav_conditions('fraction'),
1494	]
1495	);
1496	$this->add_group_control(
1497	Group_Control_Typography::get_type(),
1498	[
1499	'name' => 'fraction_typography',
1500	'label' => esc_html__('Typography', 'uicore-elements'),
1501	'selector' => '{{WRAPPER}} .ui-e-fraction span, {{WRAPPER}} .ui-e-fraction',
1502	'conditions' => $this->nav_conditions('fraction'),
1503	]
1504	);
1505
1506	$this->end_controls_section();
1507	}
1508	// Carousel Additional Controls
1509	function TRAIT_register_carousel_additional_controls()
1510	{
1511	$this->add_control(
1512	'carousel_gap',
1513	[
1514	'label' => __('Item Gap', 'uicore-elements'),
1515	'type' => Controls_Manager::SLIDER,
1516	'default' => [
1517	'size' => 20,
1518	],
1519	'range' => [
1520	'px' => [
1521	'min' => 0,
1522	'max' => 100,
1523	],
1524	],
1525	'frontend_available' => true,
1526	]
1527	);
1528	$this->add_control(
1529	'match_height',
1530	[
1531	'label' => __('Match Item Height', 'uicore-elements'),
1532	'type' => Controls_Manager::SWITCHER,
1533	'default' => 'yes',
1534	'prefix_class' => 'ui-e-match-height-',
1535	'selectors' => [
1536	'{{WRAPPER}} .ui-e-wrp' => 'height: auto',
1537	'{{WRAPPER}} .ui-e-animations-wrp, {{WRAPPER}} .ui-e-item-wrp, {{WRAPPER}} .ui-e-item' => 'height: 100%'
1538	]
1539	]
1540	);
1541	}
1542
1543	// Navigation rendering
1544	function render_carousel_dots()
1545	{
1546	?>
1547	<div class="swiper-pagination ui-e-dots"></div>
1548	<?php
1549	}
1550	function render_carousel_arrows()
1551	{
1552	$settings = $this->get_settings_for_display();
1553	?>
1554	<div class="ui-e-button ui-e-previous" role="button" aria-label="Previous slide">
1555	<?php Icons_Manager::render_icon( $settings['previous_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1556	</div>
1557	<div class="ui-e-button ui-e-next" role="button" aria-label="Next slide">
1558	<?php Icons_Manager::render_icon( $settings['next_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1559	</div>
1560	<?php
1561	}
1562	function render_carousel_fraction()
1563	{
1564	?>
1565	<div class="ui-e-fraction">
1566	<span class="ui-e-current"></span>
1567	/
1568	<span class="ui-e-total"></span>
1569	</div>
1570	<?php
1571	}
1572	function TRAIT_render_carousel_navigations()
1573	{
1574	$navigation = $this->get_settings_for_display('navigation');
1575
1576	// Migration code from old navigation select2 array values
1577	if(is_array($navigation)) {
1578	$navigation = implode('-', $navigation);
1579	}
1580
1581	if(strpos($navigation, 'dots') !== false) {
1582	$this->render_carousel_dots();
1583	}
1584	if(strpos($navigation, 'arrows') !== false) {
1585	$this->render_carousel_arrows();
1586	}
1587	if(strpos($navigation, 'fraction') !== false) {
1588	$this->render_carousel_fraction();
1589	}
1590	}
1591	}