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

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

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