premium-carousel.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.11.32

premium-addons-for-elementor / widgets / premium-carousel.php

premium-addons-for-elementor / widgets Last commit date

premium-carousel.php

1909 lines

1	<?php
2	/**
3	* Premium Carousel.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Plugin;
10	use Elementor\Widget_Base;
11	use Elementor\Controls_Manager;
12	use Elementor\Icons_Manager;
13	use Elementor\Repeater;
14	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
15	use Elementor\Group_Control_Border;
16	use Elementor\Group_Control_Typography;
17	use Elementor\Group_Control_Background;
18
19	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
20
21	// PremiumAddons Classes.
22	use PremiumAddons\Includes\Helper_Functions;
23	use PremiumAddons\Includes\Controls\Premium_Post_Filter;
24
25	if ( ! defined( 'ABSPATH' ) ) {
26	exit; // No access of directly access.
27	}
28
29	/**
30	* Class Premium_Carousel
31	*/
32	class Premium_Carousel extends Widget_Base {
33
34
35	/**
36	* Retrieve Widget Name.
37	*
38	* @since 1.0.0
39	* @access public
40	*/
41	public function get_name() {
42	return 'premium-carousel-widget';
43	}
44
45	/**
46	* Retrieve Widget Title.
47	*
48	* @since 1.0.0
49	* @access public
50	*/
51	public function get_title() {
52	return __( 'Carousel', 'premium-addons-for-elementor' );
53	}
54
55	/**
56	* Retrieve Widget Icon.
57	*
58	* @since 1.0.0
59	* @access public
60	*
61	* @return string widget icon.
62	*/
63	public function get_icon() {
64	return 'pa-carousel';
65	}
66
67	/**
68	* Widget preview refresh button.
69	*
70	* @since 1.0.0
71	* @access public
72	*/
73	public function is_reload_preview_required() {
74	return true;
75	}
76
77	/**
78	* Retrieve Widget Dependent CSS.
79	*
80	* @since 1.0.0
81	* @access public
82	*
83	* @return array CSS style handles.
84	*/
85	public function get_style_depends() {
86	return array(
87	'font-awesome-5-all',
88	'pa-slick',
89	'premium-addons',
90	);
91	}
92
93	/**
94	* Retrieve Widget Dependent JS.
95	*
96	* @since 1.0.0
97	* @access public
98	*
99	* @return array JS script handles.
100	*/
101	public function get_script_depends() {
102	return array(
103	'pa-slick',
104	'premium-addons',
105	);
106	}
107
108	/**
109	* Retrieve Widget Keywords.
110	*
111	* @since 1.0.0
112	* @access public
113	*
114	* @return string Widget keywords.
115	*/
116	public function get_keywords() {
117	return array( 'pa', 'premium', 'premium carousel', 'slider', 'advanced', 'testimonial' );
118	}
119
120	protected function is_dynamic_content(): bool {
121	return false;
122	}
123
124	/**
125	* Retrieve Widget Categories.
126	*
127	* @since 1.5.1
128	* @access public
129	*
130	* @return array Widget categories.
131	*/
132	public function get_categories() {
133	return array( 'premium-elements' );
134	}
135
136	/**
137	* Retrieve Widget Support URL.
138	*
139	* @access public
140	*
141	* @return string support URL.
142	*/
143	public function get_custom_help_url() {
144	return 'https://premiumaddons.com/support/';
145	}
146
147	public function has_widget_inner_wrapper(): bool {
148	return ! Helper_Functions::check_elementor_experiment( 'e_optimized_markup' );
149	}
150
151	/**
152	* Register Carousel controls.
153	*
154	* @since 1.0.0
155	* @access protected
156	*/
157	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
158
159	$this->start_controls_section(
160	'premium_carousel_global_settings',
161	array(
162	'label' => __( 'Carousel', 'premium-addons-for-elementor' ),
163	)
164	);
165
166	$demo = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/elementor-carousel-widget/', 'carousel', 'wp-editor', 'demo' );
167	Helper_Functions::add_templates_controls( $this, 'carousel', $demo );
168
169	$this->add_control(
170	'premium_carousel_slider_content',
171	array(
172	'label' => __( 'Templates', 'premium-addons-for-elementor' ),
173	'type' => Controls_Manager::HIDDEN,
174	'classes' => 'premium-live-temp-label',
175	'label_block' => true,
176	'multiple' => true,
177	'source' => 'elementor_library',
178
179	)
180	);
181
182	$repeater = new REPEATER();
183
184	$repeater->add_control(
185	'live_temp_content',
186	array(
187	'label' => __( 'Template Title', 'premium-addons-for-elementor' ),
188	'type' => Controls_Manager::TEXT,
189	'classes' => 'premium-live-temp-title control-hidden',
190	'label_block' => true,
191	)
192	);
193
194	$repeater->add_control(
195	'premium_carousel_repeater_item_live',
196	array(
197	'type' => Controls_Manager::BUTTON,
198	'label_block' => true,
199	'button_type' => 'default papro-btn-block',
200	'text' => __( 'Create / Edit Template', 'premium-addons-for-elementor' ),
201	'event' => 'createLiveTemp',
202	)
203	);
204
205	$repeater->add_control(
206	'premium_carousel_repeater_item',
207	array(
208	'label' => __( 'OR Select Existing Template', 'premium-addons-for-elementor' ),
209	'type' => Premium_Post_Filter::TYPE,
210	'classes' => 'premium-live-temp-label',
211	'label_block' => true,
212	'multiple' => false,
213	'source' => 'elementor_library',
214	)
215	);
216
217	$repeater->add_control(
218	'custom_navigation',
219	array(
220	'label' => __( 'Custom Navigation Element Selector', 'premium-addons-for-elementor' ),
221	'type' => Controls_Manager::TEXT,
222	'label_block' => true,
223	'description' => __( 'Use this to add an element selector to be used to navigate to this slide. For example #slide-1', 'premium-addons-for-elementor' ),
224	)
225	);
226
227	$this->add_control(
228	'premium_carousel_templates_repeater',
229	array(
230	'label' => __( 'Templates', 'premium-addons-for-elementor' ),
231	'type' => Controls_Manager::REPEATER,
232	'fields' => $repeater->get_controls(),
233	'title_field' => 'Template: {{{ "" !== premium_carousel_repeater_item ? premium_carousel_repeater_item : "Live Template" }}}',
234	'prevent_empty' => false,
235	)
236	);
237
238	$this->add_control(
239	'premium_carousel_slider_type',
240	array(
241	'label' => __( 'Direction', 'premium-addons-for-elementor' ),
242	'type' => Controls_Manager::SELECT,
243	'options' => array(
244	'horizontal' => __( 'Horizontal', 'premium-addons-for-elementor' ),
245	'vertical' => __( 'Vertical', 'premium-addons-for-elementor' ),
246	),
247	'default' => 'horizontal',
248	)
249	);
250
251	$this->add_control(
252	'premium_carousel_slides_to_show',
253	array(
254	'label' => __( 'Appearance', 'premium-addons-for-elementor' ),
255	'type' => Controls_Manager::SELECT,
256	'default' => 'all',
257	'separator' => 'before',
258	'options' => array(
259	'all' => __( 'All visible', 'premium-addons-for-elementor' ),
260	'single' => __( 'One at a time', 'premium-addons-for-elementor' ),
261	),
262	)
263	);
264
265	$this->add_control(
266	'premium_carousel_responsive_desktop',
267	array(
268	'label' => __( 'Desktop Slides', 'premium-addons-for-elementor' ),
269	'type' => Controls_Manager::NUMBER,
270	'default' => 1,
271	)
272	);
273
274	$this->add_control(
275	'premium_carousel_responsive_tabs',
276	array(
277	'label' => __( 'Tabs Slides', 'premium-addons-for-elementor' ),
278	'type' => Controls_Manager::NUMBER,
279	'default' => 1,
280	)
281	);
282
283	$this->add_control(
284	'premium_carousel_responsive_mobile',
285	array(
286	'label' => __( 'Mobile Slides', 'premium-addons-for-elementor' ),
287	'type' => Controls_Manager::NUMBER,
288	'default' => 1,
289	)
290	);
291
292	$this->add_control(
293	'overflow_slides',
294	array(
295	'label' => __( 'Overflow Slides', 'premium-addons-for-elementor' ),
296	'render_type' => 'template',
297	'type' => Controls_Manager::SWITCHER,
298	'separator' => 'before',
299	'selectors' => array(
300	'{{WRAPPER}} .slick-list' => 'overflow: visible;',
301	'body' => 'overflow-x: hidden;',
302	),
303	'condition' => array(
304	'premium_carousel_slider_type' => 'horizontal',
305	),
306	)
307	);
308
309	$this->add_control(
310	'mscroll',
311	array(
312	'label' => __( 'Use With Magic Scroll', 'premium-addons-for-elementor' ),
313	'type' => Controls_Manager::SWITCHER,
314	'separator' => 'before',
315	'description' => __( 'Enable this option if you want to animate the carousel using ', 'premium-addons-for-elementor' ) . '<a href="https://premiumaddons.com/elementor-magic-scroll-global-addon/" target="_blank">Magic Scroll addon.</a>',
316	)
317	);
318
319	$this->end_controls_section();
320
321	$this->start_controls_section(
322	'premium_carousel_nav_section',
323	array(
324	'label' => __( 'Navigation', 'premium-addons-for-elementor' ),
325	'condition' => array(
326	'mscroll!' => 'yes',
327	),
328	)
329	);
330
331	$this->add_control(
332	'premium_carousel_nav_options',
333	array(
334	'label' => __( 'Navigation', 'premium-addons-for-elementor' ),
335	'type' => Controls_Manager::SELECT,
336	'default' => 'dots',
337	'options' => array(
338	'none' => __( 'None', 'premium-addons-for-elementor' ),
339	'dots' => __( 'Dots', 'premium-addons-for-elementor' ),
340	'fraction' => __( 'Slide Index', 'premium-addons-for-elementor' ),
341	'progressbar' => __( 'Progress Bar', 'premium-addons-for-elementor' ),
342	'progress' => __( 'Animated Progress Bar', 'premium-addons-for-elementor' ),
343	),
344	)
345	);
346
347	$this->add_control(
348	'premium_carousel_dot_position',
349	array(
350	'label' => __( 'Position', 'premium-addons-for-elementor' ),
351	'type' => Controls_Manager::SELECT,
352	'default' => 'below',
353	'options' => array(
354	'below' => __( 'Below Slides', 'premium-addons-for-elementor' ),
355	'above' => __( 'On Slides', 'premium-addons-for-elementor' ),
356	),
357	'condition' => array(
358	'premium_carousel_nav_options' => 'dots',
359	),
360	)
361	);
362
363	$this->add_responsive_control(
364	'premium_carousel_dot_offset',
365	array(
366	'label' => __( 'Horizontal Offset', 'premium-addons-for-elementor' ),
367	'type' => Controls_Manager::SLIDER,
368	'size_units' => array( 'px', 'em', '%' ),
369	'selectors' => array(
370	'{{WRAPPER}} .premium-carousel-dots-above ul.slick-dots' => 'left: {{SIZE}}{{UNIT}}',
371	),
372	'condition' => array(
373	'premium_carousel_nav_options' => 'dots',
374	'premium_carousel_dot_position' => 'above',
375	),
376	)
377	);
378
379	$this->add_responsive_control(
380	'premium_carousel_dot_voffset',
381	array(
382	'label' => __( 'Vertical Offset', 'premium-addons-for-elementor' ),
383	'type' => Controls_Manager::SLIDER,
384	'size_units' => array( 'px', 'em', '%', 'custom' ),
385	'selectors' => array(
386	'{{WRAPPER}} .premium-carousel-dots-above ul.slick-dots' => 'top: {{SIZE}}{{UNIT}}',
387	'{{WRAPPER}} .premium-carousel-dots-below ul.slick-dots' => 'bottom: {{SIZE}}{{UNIT}}',
388	'{{WRAPPER}} .premium-carousel-nav-fraction' => 'bottom: {{SIZE}}{{UNIT}}',
389	),
390	'condition' => array(
391	'premium_carousel_nav_options!' => array( 'none', 'progress' ),
392	),
393	)
394	);
395
396	$this->add_control(
397	'dots_text_align',
398	array(
399	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
400	'type' => Controls_Manager::CHOOSE,
401	'options' => array(
402	'left' => array(
403	'title' => __( 'Left', 'premium-addons-for-elementor' ),
404	'icon' => 'eicon-text-align-left',
405	),
406	'center' => array(
407	'title' => __( 'Center', 'premium-addons-for-elementor' ),
408	'icon' => 'eicon-text-align-center',
409	),
410	'right' => array(
411	'title' => __( 'Right', 'premium-addons-for-elementor' ),
412	'icon' => 'eicon-text-align-right',
413	),
414	),
415	'default' => 'center',
416	'toggle' => false,
417	'selectors' => array(
418	'{{WRAPPER}} .slick-dots,{{WRAPPER}} .premium-carousel-nav-fraction' => 'text-align: {{VALUE}};',
419	),
420	'conditions' => array(
421	'relation' => 'or',
422	'terms' => array(
423	array(
424	'name' => 'premium_carousel_nav_options',
425	'value' => 'fraction',
426	),
427	array(
428	'terms' => array(
429	array(
430	'name' => 'premium_carousel_nav_options',
431	'value' => 'dots',
432	),
433	array(
434	'name' => 'premium_carousel_dot_position',
435	'value' => 'below',
436	),
437	),
438	),
439
440	),
441	),
442	)
443	);
444
445	$this->add_control(
446	'premium_carousel_navigation_effect',
447	array(
448	'label' => __( 'Ripple Effect', 'premium-addons-for-elementor' ),
449	'description' => __( 'Enable a ripple effect when the active dot is hovered/clicked', 'premium-addons-for-elementor' ),
450	'type' => Controls_Manager::SWITCHER,
451	'prefix_class' => 'premium-carousel-ripple-',
452	'condition' => array(
453	'premium_carousel_nav_options' => 'dots',
454	),
455	)
456	);
457
458	$this->add_control(
459	'premium_carousel_navigation_show',
460	array(
461	'label' => __( 'Arrows', 'premium-addons-for-elementor' ),
462	'description' => __( 'Enable or disable navigation arrows', 'premium-addons-for-elementor' ),
463	'type' => Controls_Manager::SWITCHER,
464	'separator' => 'before',
465	'default' => 'yes',
466	)
467	);
468
469	$this->add_control(
470	'arrows_position',
471	array(
472	'label' => __( 'Position', 'premium-addons-for-elementor' ),
473	'type' => Controls_Manager::CHOOSE,
474	'options' => array(
475	'above' => array(
476	'title' => __( 'Above Slide', 'premium-addons-for-elementor' ),
477	'icon' => 'eicon-v-align-top',
478	),
479	'default' => array(
480	'title' => __( 'Center', 'premium-addons-for-elementor' ),
481	'icon' => 'eicon-h-align-center',
482	),
483	'below' => array(
484	'title' => __( 'Below Slides', 'premium-addons-for-elementor' ),
485	'icon' => 'eicon-v-align-bottom',
486	),
487	),
488	'default' => 'default',
489	'condition' => array(
490	'premium_carousel_navigation_show' => 'yes',
491	'premium_carousel_slider_type' => 'horizontal',
492	),
493	)
494	);
495
496	$this->add_control(
497	'arrows_alignment',
498	array(
499	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
500	'type' => Controls_Manager::CHOOSE,
501	'options' => array(
502	'start' => array(
503	'title' => __( 'Start', 'premium-addons-for-elementor' ),
504	'icon' => 'eicon-h-align-left',
505	),
506	'center' => array(
507	'title' => __( 'Center', 'premium-addons-for-elementor' ),
508	'icon' => 'eicon-v-align-middle',
509	),
510	'end' => array(
511	'title' => __( 'End', 'premium-addons-for-elementor' ),
512	'icon' => 'eicon-h-align-right',
513	),
514	),
515	'default' => 'start',
516	'condition' => array(
517	'premium_carousel_navigation_show' => 'yes',
518	'premium_carousel_slider_type' => 'horizontal',
519	'arrows_position!' => 'default',
520	),
521	'selectors' => array(
522	'{{WRAPPER}} .premium-carousel-arrows-wrapper' => 'justify-content: {{VALUE}}',
523	),
524	)
525	);
526
527	$this->add_responsive_control(
528	'arrows_gap',
529	array(
530	'label' => __( 'Spacing', 'premium-addons-for-elementor' ),
531	'type' => Controls_Manager::SLIDER,
532	'size_units' => array( 'px', 'em', '%', 'custom' ),
533	'selectors' => array(
534	'{{WRAPPER}} .premium-carousel-arrows-wrapper' => 'gap: {{SIZE}}{{UNIT}}',
535	),
536	'condition' => array(
537	'premium_carousel_navigation_show' => 'yes',
538	'premium_carousel_slider_type' => 'horizontal',
539	'arrows_position!' => 'default',
540	),
541	)
542	);
543
544	$this->add_responsive_control(
545	'arrows_margin',
546	array(
547	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
548	'type' => Controls_Manager::DIMENSIONS,
549	'size_units' => array( 'px', 'em', '%', 'custom' ),
550	'selectors' => array(
551	'{{WRAPPER}} .premium-carousel-arrows-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
552	),
553	'condition' => array(
554	'premium_carousel_navigation_show' => 'yes',
555	'premium_carousel_slider_type' => 'horizontal',
556	'arrows_position' => 'below',
557	),
558	)
559	);
560
561	$this->end_controls_section();
562
563	$this->start_controls_section(
564	'premium_carousel_slides_settings',
565	array(
566	'label' => __( 'Slides Settings', 'premium-addons-for-elementor' ),
567	'condition' => array(
568	'mscroll!' => 'yes',
569	),
570	)
571	);
572
573	$this->add_control(
574	'premium_carousel_loop',
575	array(
576	'label' => __( 'Infinite Loop', 'premium-addons-for-elementor' ),
577	'type' => Controls_Manager::SWITCHER,
578	'description' => __( 'Restart the slider automatically as it passes the last slide', 'premium-addons-for-elementor' ),
579	'default' => 'yes',
580	'conditions' => array(
581	'relation' => 'or',
582	'terms' => array(
583	array(
584	'name' => 'premium_carousel_slider_type',
585	'value' => 'vertical',
586	),
587	array(
588	'terms' => array(
589	array(
590	'name' => 'premium_carousel_slider_type',
591	'value' => 'horizontal',
592	),
593	array(
594	'name' => 'overflow_slides',
595	'operator' => '!==',
596	'value' => 'yes',
597	),
598	),
599	),
600	),
601	),
602	)
603	);
604
605	$this->add_control(
606	'premium_carousel_fade',
607	array(
608	'label' => __( 'Fade', 'premium-addons-for-elementor' ),
609	'type' => Controls_Manager::SWITCHER,
610	'description' => __( 'Enable fade transition between slides', 'premium-addons-for-elementor' ),
611	'condition' => array(
612	'premium_carousel_slider_type' => 'horizontal',
613	'overflow_slides!' => 'yes',
614	),
615	)
616	);
617
618	$this->add_control(
619	'premium_carousel_zoom',
620	array(
621	'label' => __( 'Zoom Effect', 'premium-addons-for-elementor' ),
622	'type' => Controls_Manager::SWITCHER,
623	'condition' => array(
624	'premium_carousel_fade' => 'yes',
625	'premium_carousel_slider_type' => 'horizontal',
626	'overflow_slides!' => 'yes',
627	),
628	)
629	);
630
631	$this->add_control(
632	'premium_carousel_speed',
633	array(
634	'label' => __( 'Transition Speed (ms)', 'premium-addons-for-elementor' ),
635	'description' => __( 'Set a navigation speed value. The value will be counted in milliseconds (ms)', 'premium-addons-for-elementor' ),
636	'type' => Controls_Manager::NUMBER,
637	'default' => 300,
638	'render_type' => 'template',
639	'selectors' => array(
640	'{{WRAPPER}} .premium-carousel-scale .slick-slide' => 'transition: all {{VALUE}}ms !important',
641	'{{WRAPPER}} .premium-carousel-nav-progressbar-fill' => 'transition-duration: {{VALUE}}ms !important',
642	),
643	)
644	);
645
646	$this->add_control(
647	'premium_carousel_autoplay',
648	array(
649	'label' => __( 'Autoplay Slides', 'premium-addons-for-elementor' ),
650	'description' => __( 'Slide will start automatically', 'premium-addons-for-elementor' ),
651	'type' => Controls_Manager::SWITCHER,
652	'default' => 'yes',
653	)
654	);
655
656	$this->add_control(
657	'premium_carousel_autoplay_speed',
658	array(
659	'label' => __( 'Autoplay Speed', 'premium-addons-for-elementor' ),
660	'description' => __( 'Autoplay Speed means at which time the next slide should come. Set a value in milliseconds (ms)', 'premium-addons-for-elementor' ),
661	'type' => Controls_Manager::NUMBER,
662	'default' => 5000,
663	'condition' => array(
664	'premium_carousel_autoplay' => 'yes',
665	),
666	)
667	);
668
669	$this->add_control(
670	'premium_carousel_animation_list',
671	array(
672	'label' => __( 'Animations', 'premium-addons-for-elementor' ),
673	'type' => Controls_Manager::HIDDEN,
674	'render_type' => 'template',
675	)
676	);
677
678	$this->add_control(
679	'premium_carousel_extra_class',
680	array(
681	'label' => __( 'Extra Class', 'premium-addons-for-elementor' ),
682	'type' => Controls_Manager::TEXT,
683	'description' => __( 'Add extra class name that will be applied to the carousel, and you can use this class for your customizations.', 'premium-addons-for-elementor' ),
684	)
685	);
686
687	$this->end_controls_section();
688
689	$this->start_controls_section(
690	'premium-carousel-advance-settings',
691	array(
692	'label' => __( 'Advanced Settings', 'premium-addons-for-elementor' ),
693	'condition' => array(
694	'mscroll!' => 'yes',
695	),
696	)
697	);
698
699	$this->add_control(
700	'premium_carousel_draggable_effect',
701	array(
702	'label' => __( 'Draggable Effect', 'premium-addons-for-elementor' ),
703	'description' => __( 'Allow the slides to be dragged by mouse click', 'premium-addons-for-elementor' ),
704	'type' => Controls_Manager::SWITCHER,
705	'default' => 'yes',
706	)
707	);
708
709	$this->add_control(
710	'premium_carousel_touch_move',
711	array(
712	'label' => __( 'Touch Move', 'premium-addons-for-elementor' ),
713	'description' => __( 'Enable slide moving with touch', 'premium-addons-for-elementor' ),
714	'type' => Controls_Manager::SWITCHER,
715	'default' => 'yes',
716	)
717	);
718
719	$this->add_control(
720	'variable_width',
721	array(
722	'label' => __( 'Variable Width', 'premium-addons-for-elementor' ),
723	'description' => __( 'Allows each slide to have a different width.', 'premium-addons-for-elementor' ),
724	'type' => Controls_Manager::SWITCHER,
725	)
726	);
727
728	$this->add_control(
729	'premium_carousel_adaptive_height',
730	array(
731	'label' => __( 'Adaptive Height', 'premium-addons-for-elementor' ),
732	'description' => __( 'Adaptive height setting gives each slide a fixed height to avoid huge white space gaps', 'premium-addons-for-elementor' ),
733	'type' => Controls_Manager::SWITCHER,
734	)
735	);
736
737	$this->add_control(
738	'premium_carousel_pausehover',
739	array(
740	'label' => __( 'Pause on Hover', 'premium-addons-for-elementor' ),
741	'description' => __( 'Pause the slider when mouse hover', 'premium-addons-for-elementor' ),
742	'type' => Controls_Manager::SWITCHER,
743	)
744	);
745
746	$this->add_control(
747	'premium_carousel_center_mode',
748	array(
749	'label' => __( 'Center Mode', 'premium-addons-for-elementor' ),
750	'description' => __( 'Center mode enables a centered view with partial next/previous slides.', 'premium-addons-for-elementor' ),
751	'type' => Controls_Manager::SWITCHER,
752	'condition' => array(
753	'overflow_slides!' => 'yes',
754	),
755	)
756	);
757
758	$this->add_responsive_control(
759	'premium_carousel_space_btw_items',
760	array(
761	'label' => __( 'Slides\' Spacing', 'premium-addons-for-elementor' ),
762	'description' => __( 'Set a spacing value in pixels (px)', 'premium-addons-for-elementor' ),
763	'type' => Controls_Manager::NUMBER,
764	'render_type' => 'template',
765	'default' => '15',
766	'selectors' => array(
767	'{{WRAPPER}}' => '--pa-carousel-center-padding: {{VALUE}}',
768	),
769	'condition' => array(
770	'premium_carousel_center_mode' => 'yes',
771	'overflow_slides!' => 'yes',
772	),
773	)
774	);
775
776	$this->add_control(
777	'premium_carousel_tablet_breakpoint',
778	array(
779	'label' => __( 'Tablet Breakpoint', 'premium-addons-for-elementor' ),
780	'description' => __( 'Sets the breakpoint between desktop and tablet devices. Below this breakpoint tablet layout will appear (Default: 1025px).', 'premium-addons-for-elementor' ),
781	'type' => Controls_Manager::NUMBER,
782	'default' => 1025,
783	)
784	);
785
786	$this->add_control(
787	'premium_carousel_mobile_breakpoint',
788	array(
789	'label' => __( 'Mobile Breakpoint', 'premium-addons-for-elementor' ),
790	'description' => __( 'Sets the breakpoint between tablet and mobile devices. Below this breakpoint mobile layout will appear (Default: 768px).', 'premium-addons-for-elementor' ),
791	'type' => Controls_Manager::NUMBER,
792	'default' => 768,
793	)
794	);
795
796	$this->add_control(
797	'linear_ease',
798	array(
799	'label' => __( 'Linear Easing', 'premium-addons-for-elementor' ),
800	'type' => Controls_Manager::SWITCHER,
801	)
802	);
803
804	$this->end_controls_section();
805
806	$this->start_controls_section(
807	'section_pa_docs',
808	array(
809	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
810	)
811	);
812
813	$docs = array(
814	'https://premiumaddons.com/docs/carousel-widget-tutorial/' => __( 'Getting started »', 'premium-addons-for-elementor' ),
815	'https://premiumaddons.com/docs/i-can-see-the-first-slide-only-in-carousel-widget' => __( 'Issue: I can see the first slide only »', 'premium-addons-for-elementor' ),
816	'https://premiumaddons.com/docs/how-to-create-elementor-template-to-be-used-with-premium-addons' => __( 'How to create an Elementor template to be used in Carousel widget »', 'premium-addons-for-elementor' ),
817	'https://premiumaddons.com/docs/why-im-not-able-to-see-elementor-font-awesome-5-icons-in-premium-add-ons/' => __( 'I\'m not able to see Font Awesome icons in the widget »', 'premium-addons-for-elementor' ),
818	'https://premiumaddons.com/docs/how-to-add-entrance-animations-to-elementor-elements-in-premium-carousel-widget/' => __( 'How to add entrance animations to the elements inside Premium Carousel Widget »', 'premium-addons-for-elementor' ),
819	'https://premiumaddons.com/docs/how-to-use-elementor-widgets-to-navigate-through-carousel-widget-slides/' => __( 'How To Use Elementor Widgets To Navigate Through Carousel Widget Slides »', 'premium-addons-for-elementor' ),
820	);
821
822	$doc_index = 1;
823	foreach ( $docs as $url => $title ) {
824
825	$doc_url = Helper_Functions::get_campaign_link( $url, 'carousel-widget', 'wp-editor', 'get-support' );
826
827	$this->add_control(
828	'doc_' . $doc_index,
829	array(
830	'type' => Controls_Manager::RAW_HTML,
831	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title ),
832	'content_classes' => 'editor-pa-doc',
833	)
834	);
835
836	++$doc_index;
837
838	}
839
840	$this->end_controls_section();
841
842	Helper_Functions::register_papro_promotion_controls( $this, 'carousel' );
843
844	$this->start_controls_section(
845	'premium_carousel_navigation_arrows',
846	array(
847	'label' => __( 'Navigation Arrows', 'premium-addons-for-elementor' ),
848	'tab' => Controls_Manager::TAB_STYLE,
849	'condition' => array(
850	'premium_carousel_navigation_show' => 'yes',
851	),
852	)
853	);
854
855	$this->add_control(
856	'custom_left_arrow',
857	array(
858	'label' => __( 'Custom Previous Icon', 'premium-addons-for-elementor' ),
859	'type' => Controls_Manager::SWITCHER,
860	)
861	);
862
863	$this->add_control(
864	'custom_left_arrow_select',
865	array(
866	'label' => __( 'Select Icon', 'premium-addons-for-elementor' ),
867	'type' => Controls_Manager::ICONS,
868	'default' => array(
869	'value' => 'fas fa-arrow-alt-circle-left',
870	'library' => 'fa-solid',
871	),
872	'skin' => 'inline',
873	'condition' => array(
874	'custom_left_arrow' => 'yes',
875	),
876	'label_block' => false,
877	)
878	);
879
880	$this->add_control(
881	'premium_carousel_arrow_icon_prev_ver',
882	array(
883	'label' => __( 'Top Icon', 'premium-addons-for-elementor' ),
884	'type' => Controls_Manager::CHOOSE,
885	'options' => array(
886	'left_arrow_bold' => array(
887	'icon' => 'fas fa-arrow-up',
888	),
889	'left_arrow_long' => array(
890	'icon' => 'fas fa-long-arrow-alt-up',
891	),
892	'left_arrow_long_circle' => array(
893	'icon' => 'fas fa-arrow-circle-up',
894	),
895	'left_arrow_angle' => array(
896	'icon' => 'fas fa-angle-up',
897	),
898	'left_arrow_chevron' => array(
899	'icon' => 'fas fa-chevron-up',
900	),
901	),
902	'default' => 'left_arrow_angle',
903	'condition' => array(
904	'premium_carousel_slider_type' => 'vertical',
905	'custom_left_arrow!' => 'yes',
906	),
907	'toggle' => false,
908	)
909	);
910
911	$this->add_control(
912	'premium_carousel_arrow_icon_prev',
913	array(
914	'label' => __( 'Left Icon', 'premium-addons-for-elementor' ),
915	'type' => Controls_Manager::CHOOSE,
916	'options' => array(
917	'left_arrow_bold' => array(
918	'icon' => 'fas fa-arrow-left',
919	),
920	'left_arrow_long' => array(
921	'icon' => 'fas fa-long-arrow-alt-left',
922	),
923	'left_arrow_long_circle' => array(
924	'icon' => 'fas fa-arrow-circle-left',
925	),
926	'left_arrow_angle' => array(
927	'icon' => 'fas fa-angle-left',
928	),
929	'left_arrow_chevron' => array(
930	'icon' => 'fas fa-chevron-left',
931	),
932	),
933	'default' => 'left_arrow_angle',
934	'condition' => array(
935	'premium_carousel_slider_type!' => 'vertical',
936	'custom_left_arrow!' => 'yes',
937	),
938	'toggle' => false,
939	)
940	);
941
942	$this->add_control(
943	'custom_right_arrow',
944	array(
945	'label' => __( 'Custom Next Icon', 'premium-addons-for-elementor' ),
946	'type' => Controls_Manager::SWITCHER,
947	'separator' => 'before',
948	)
949	);
950
951	$this->add_control(
952	'custom_right_arrow_select',
953	array(
954	'label' => __( 'Select Icon', 'premium-addons-for-elementor' ),
955	'type' => Controls_Manager::ICONS,
956	'default' => array(
957	'value' => 'fas fa-arrow-alt-circle-right',
958	'library' => 'fa-solid',
959	),
960	'skin' => 'inline',
961	'condition' => array(
962	'custom_right_arrow' => 'yes',
963	),
964	'label_block' => false,
965	)
966	);
967
968	$this->add_control(
969	'premium_carousel_arrow_icon_next',
970	array(
971	'label' => __( 'Right Icon', 'premium-addons-for-elementor' ),
972	'type' => Controls_Manager::CHOOSE,
973	'options' => array(
974	'right_arrow_bold' => array(
975	'icon' => 'fas fa-arrow-right',
976	),
977	'right_arrow_long' => array(
978	'icon' => 'fas fa-long-arrow-alt-right',
979	),
980	'right_arrow_long_circle' => array(
981	'icon' => 'fas fa-arrow-circle-right',
982	),
983	'right_arrow_angle' => array(
984	'icon' => 'fas fa-angle-right',
985	),
986	'right_arrow_chevron' => array(
987	'icon' => 'fas fa-chevron-right',
988	),
989	),
990	'default' => 'right_arrow_angle',
991	'condition' => array(
992	'premium_carousel_slider_type!' => 'vertical',
993	'custom_right_arrow!' => 'yes',
994	),
995	'toggle' => false,
996	)
997	);
998
999	$this->add_control(
1000	'premium_carousel_arrow_icon_next_ver',
1001	array(
1002	'label' => __( 'Bottom Icon', 'premium-addons-for-elementor' ),
1003	'type' => Controls_Manager::CHOOSE,
1004	'options' => array(
1005	'right_arrow_bold' => array(
1006	'icon' => 'fas fa-arrow-down',
1007	),
1008	'right_arrow_long' => array(
1009	'icon' => 'fas fa-long-arrow-alt-down',
1010	),
1011	'right_arrow_long_circle' => array(
1012	'icon' => 'fas fa-arrow-circle-down',
1013	),
1014	'right_arrow_angle' => array(
1015	'icon' => 'fas fa-angle-down',
1016	),
1017	'right_arrow_chevron' => array(
1018	'icon' => 'fas fa-chevron-down',
1019	),
1020	),
1021	'default' => 'right_arrow_angle',
1022	'condition' => array(
1023	'premium_carousel_slider_type' => 'vertical',
1024	'custom_right_arrow!' => 'yes',
1025	),
1026	'toggle' => false,
1027	)
1028	);
1029
1030	$this->add_responsive_control(
1031	'premium_carousel_arrow_size',
1032	array(
1033	'label' => __( 'Size', 'premium-addons-for-elementor' ),
1034	'type' => Controls_Manager::SLIDER,
1035	'size_units' => array( 'px', 'em', 'vw' ),
1036	'default' => array(
1037	'size' => 14,
1038	'unit' => 'px',
1039	),
1040	'range' => array(
1041	'px' => array(
1042	'min' => 0,
1043	'max' => 60,
1044	),
1045	),
1046	'separator' => 'before',
1047	'selectors' => array(
1048	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow' => 'font-size: {{SIZE}}{{UNIT}}',
1049	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
1050	),
1051	)
1052	);
1053
1054	$this->add_responsive_control(
1055	'premium_carousel_arrow_position',
1056	array(
1057	'label' => __( 'Position (px)', 'premium-addons-for-elementor' ),
1058	'type' => Controls_Manager::SLIDER,
1059	'range' => array(
1060	'px' => array(
1061	'min' => -100,
1062	'max' => 100,
1063	),
1064	),
1065	'selectors' => array(
1066	'{{WRAPPER}} a.carousel-arrow.carousel-next' => 'right: {{SIZE}}px',
1067	'{{WRAPPER}} a.carousel-arrow.carousel-prev' => 'left: {{SIZE}}px',
1068	'{{WRAPPER}} a.ver-carousel-arrow.carousel-next' => 'bottom: {{SIZE}}px',
1069	'{{WRAPPER}} a.ver-carousel-arrow.carousel-prev' => 'top: {{SIZE}}px',
1070	),
1071	'conditions' => array(
1072	'relation' => 'or',
1073	'terms' => array(
1074	array(
1075	'name' => 'premium_carousel_slider_type',
1076	'value' => 'vertical',
1077	),
1078	array(
1079	'terms' => array(
1080	array(
1081	'name' => 'premium_carousel_slider_type',
1082	'value' => 'horizontal',
1083	),
1084	array(
1085	'name' => 'arrows_position',
1086	'value' => 'default',
1087	),
1088	),
1089	),
1090	),
1091	),
1092	)
1093	);
1094
1095	$this->start_controls_tabs( 'premium_button_style_tabs' );
1096
1097	$this->start_controls_tab(
1098	'premium_button_style_normal',
1099	array(
1100	'label' => __( 'Normal', 'premium-addons-for-elementor' ),
1101	)
1102	);
1103
1104	$this->add_control(
1105	'premium_carousel_arrow_color',
1106	array(
1107	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1108	'type' => Controls_Manager::COLOR,
1109	'global' => array(
1110	'default' => Global_Colors::COLOR_SECONDARY,
1111	),
1112	'selectors' => array(
1113	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow' => 'color: {{VALUE}};',
1114	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow svg' => 'fill: {{VALUE}};',
1115	),
1116	)
1117	);
1118
1119	$this->add_control(
1120	'premium_carousel_arrow_bg_color',
1121	array(
1122	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
1123	'type' => Controls_Manager::COLOR,
1124	'selectors' => array(
1125	'{{WRAPPER}} a.carousel-next, {{WRAPPER}} a.carousel-prev' => 'background-color: {{VALUE}};',
1126	),
1127	)
1128	);
1129
1130	$this->add_group_control(
1131	Group_Control_Border::get_type(),
1132	array(
1133	'name' => 'premium_carousel_arrows_border_normal',
1134	'selector' => '{{WRAPPER}} .slick-arrow',
1135	)
1136	);
1137
1138	$this->add_control(
1139	'premium_carousel_arrows_radius_normal',
1140	array(
1141	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1142	'type' => Controls_Manager::SLIDER,
1143	'size_units' => array( 'px', '%', 'em' ),
1144	'selectors' => array(
1145	'{{WRAPPER}} .slick-arrow' => 'border-radius: {{SIZE}}{{UNIT}};',
1146	),
1147	)
1148	);
1149
1150	$this->end_controls_tab();
1151
1152	$this->start_controls_tab(
1153	'premium_carousel_arrows_hover',
1154	array(
1155	'label' => __( 'Hover', 'premium-addons-for-elementor' ),
1156	)
1157	);
1158
1159	$this->add_control(
1160	'premium_carousel_hover_arrow_color',
1161	array(
1162	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1163	'type' => Controls_Manager::COLOR,
1164	'global' => array(
1165	'default' => Global_Colors::COLOR_SECONDARY,
1166	),
1167	'selectors' => array(
1168	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow:hover' => 'color: {{VALUE}};',
1169	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow:hover svg' => 'fill: {{VALUE}};',
1170	),
1171	)
1172	);
1173
1174	$this->add_control(
1175	'premium_carousel_arrow_hover_bg_color',
1176	array(
1177	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
1178	'type' => Controls_Manager::COLOR,
1179	'selectors' => array(
1180	'{{WRAPPER}} a.carousel-next:hover, {{WRAPPER}} a.carousel-prev:hover' => 'background-color: {{VALUE}};',
1181	),
1182	)
1183	);
1184
1185	$this->add_group_control(
1186	Group_Control_Border::get_type(),
1187	array(
1188	'name' => 'premium_carousel_arrows_border_hover',
1189	'selector' => '{{WRAPPER}} .slick-arrow:hover',
1190	)
1191	);
1192
1193	$this->add_control(
1194	'premium_carousel_arrows_radius_hover',
1195	array(
1196	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1197	'type' => Controls_Manager::SLIDER,
1198	'size_units' => array( 'px', '%', 'em' ),
1199	'selectors' => array(
1200	'{{WRAPPER}} .slick-arrow:hover' => 'border-radius: {{SIZE}}{{UNIT}};',
1201	),
1202	)
1203	);
1204
1205	$this->end_controls_tab();
1206
1207	$this->start_controls_tab(
1208	'pa_arrows_disabled',
1209	array(
1210	'label' => __( 'Disabled', 'premium-addons-for-elementor' ),
1211	'conditions' => array(
1212	'terms' => array(
1213	array(
1214	'name' => 'premium_carousel_navigation_show',
1215	'value' => 'yes',
1216	),
1217	array(
1218	'relation' => 'or',
1219	'terms' => array(
1220	array(
1221	'name' => 'premium_carousel_loop',
1222	'operator' => '!==',
1223	'value' => 'yes',
1224	),
1225	array(
1226	'name' => 'overflow_slides',
1227	'value' => 'yes',
1228	),
1229	),
1230	),
1231	),
1232	),
1233	)
1234	);
1235
1236	$this->add_control(
1237	'disabled_arrow_color',
1238	array(
1239	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1240	'type' => Controls_Manager::COLOR,
1241	'selectors' => array(
1242	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow.slick-disabled, .carousel-next-{{ID}}.slick-disabled, .carousel-prev-{{ID}}.slick-disabled' => 'color: {{VALUE}};',
1243	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow.slick-disabled svg, .carousel-next-{{ID}}.slick-disabled svg, .carousel-prev-{{ID}}.slick-disabled svg' => 'fill: {{VALUE}};',
1244	),
1245	)
1246	);
1247
1248	$this->add_control(
1249	'disabled_bg_color',
1250	array(
1251	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
1252	'type' => Controls_Manager::COLOR,
1253	'selectors' => array(
1254	'{{WRAPPER}} a.carousel-next.slick-disabled, {{WRAPPER}} a.carousel-prev.slick-disabled, .carousel-next-{{ID}}.slick-disabled, .carousel-prev-{{ID}}.slick-disabled' => 'background-color: {{VALUE}};',
1255	),
1256	)
1257	);
1258
1259	$this->add_group_control(
1260	Group_Control_Border::get_type(),
1261	array(
1262	'name' => 'disabled_border_hover',
1263	'selector' => '{{WRAPPER}} .slick-arrow.slick-disabled, .carousel-next-{{ID}}.slick-disabled, .carousel-prev-{{ID}}.slick-disabled',
1264	)
1265	);
1266
1267	$this->add_control(
1268	'disabled_radius_hover',
1269	array(
1270	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1271	'type' => Controls_Manager::SLIDER,
1272	'size_units' => array( 'px', '%', 'em' ),
1273	'selectors' => array(
1274	'{{WRAPPER}} .slick-arrow.slick-disabled, .carousel-next-{{ID}}.slick-disabled, .carousel-prev-{{ID}}.slick-disabled' => 'border-radius: {{SIZE}}{{UNIT}};',
1275	),
1276	)
1277	);
1278
1279	$this->end_controls_tab();
1280
1281	$this->end_controls_tabs();
1282
1283	$this->end_controls_section();
1284
1285	$this->start_controls_section(
1286	'premium_carousel_navigation',
1287	array(
1288	'label' => __( 'Navigation Dots/Progress Bar', 'premium-addons-for-elementor' ),
1289	'tab' => Controls_Manager::TAB_STYLE,
1290	)
1291	);
1292
1293	$this->add_control(
1294	'premium_carousel_dot_icon',
1295	array(
1296	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
1297	'type' => Controls_Manager::CHOOSE,
1298	'options' => array(
1299	'square_white' => array(
1300	'icon' => 'far fa-square',
1301	),
1302	'square_black' => array(
1303	'icon' => 'fas fa-square',
1304	),
1305	'circle_white' => array(
1306	'icon' => 'fas fa-circle',
1307	),
1308	'circle_thin' => array(
1309	'icon' => 'far fa-circle',
1310	),
1311	),
1312	'default' => 'circle_white',
1313	'condition' => array(
1314	'custom_pagination_icon!' => 'yes',
1315	'premium_carousel_nav_options' => 'dots',
1316	),
1317	'toggle' => false,
1318	)
1319	);
1320
1321	$this->add_control(
1322	'custom_pagination_icon',
1323	array(
1324	'label' => __( 'Custom Icon', 'premium-addons-for-elementor' ),
1325	'type' => Controls_Manager::SWITCHER,
1326	'condition' => array(
1327	'premium_carousel_nav_options' => 'dots',
1328	),
1329	)
1330	);
1331
1332	$this->add_control(
1333	'custom_pagination_icon_select',
1334	array(
1335	'label' => __( 'Select Icon', 'premium-addons-for-elementor' ),
1336	'type' => Controls_Manager::ICONS,
1337	'default' => array(
1338	'value' => 'fas fa-dot-circle',
1339	'library' => 'fa-solid',
1340	),
1341	'skin' => 'inline',
1342	'condition' => array(
1343	'custom_pagination_icon' => 'yes',
1344	'premium_carousel_nav_options' => 'dots',
1345	),
1346	'label_block' => false,
1347	)
1348	);
1349
1350	$this->add_responsive_control(
1351	'dot_size',
1352	array(
1353	'label' => __( 'Size', 'premium-addons-for-elementor' ),
1354	'type' => Controls_Manager::SLIDER,
1355	'size_units' => array( 'px', 'em' ),
1356	'selectors' => array(
1357	'{{WRAPPER}} ul.slick-dots li, {{WRAPPER}} ul.slick-dots li svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; font-size: calc( {{SIZE}}{{UNIT}} / 2 )',
1358	),
1359	'condition' => array(
1360	'premium_carousel_nav_options' => 'dots',
1361	),
1362	)
1363	);
1364
1365	$this->add_responsive_control(
1366	'progress_height',
1367	array(
1368	'label' => __( 'Height', 'premium-addons-for-elementor' ),
1369	'type' => Controls_Manager::SLIDER,
1370	'selectors' => array(
1371	'{{WRAPPER}} .premium-carousel-nav-progressbar' => 'height: {{SIZE}}px;',
1372	'{{WRAPPER}} .premium-carousel-nav-progress' => 'height: {{SIZE}}px;',
1373	),
1374	'condition' => array(
1375	'premium_carousel_nav_options' => array( 'progressbar', 'progress' ),
1376	),
1377	)
1378	);
1379
1380	$this->add_responsive_control(
1381	'separator_spacing',
1382	array(
1383	'label' => __( 'Separator Spacing', 'premium-addons-for-elementor' ),
1384	'type' => Controls_Manager::SLIDER,
1385	'size_units' => array( 'px', 'em' ),
1386	'selectors' => array(
1387	'{{WRAPPER}} .fraction-pagination-separator' => 'margin-left: {{SIZE}}{{UNIT}}; margin-right: {{SIZE}}{{UNIT}};',
1388	),
1389	'condition' => array(
1390	'premium_carousel_nav_options' => 'fraction',
1391	),
1392	)
1393	);
1394
1395	$this->add_group_control(
1396	Group_Control_Typography::get_type(),
1397	array(
1398	'name' => 'premium_navigation_typography',
1399	'selector' => '{{WRAPPER}} .premium-carousel-nav-fraction',
1400	'global' => array(
1401	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1402	),
1403	'condition' => array(
1404	'premium_carousel_nav_options' => 'fraction',
1405	),
1406	)
1407	);
1408
1409	$this->add_control(
1410	'premium_carousel_dot_navigation_color',
1411	array(
1412	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1413	'type' => Controls_Manager::COLOR,
1414	'global' => array(
1415	'default' => Global_Colors::COLOR_SECONDARY,
1416	),
1417	'selectors' => array(
1418	'{{WRAPPER}} ul.slick-dots li' => 'color: {{VALUE}}',
1419	'{{WRAPPER}} ul.slick-dots li svg' => 'fill: {{VALUE}}',
1420	'{{WRAPPER}} .fraction-pagination-total' => 'color: {{VALUE}}',
1421	),
1422	'condition' => array(
1423	'premium_carousel_nav_options' => array( 'dots', 'fraction' ),
1424	),
1425	)
1426	);
1427
1428	$this->add_control(
1429	'premium_carousel_navigation_separator_color',
1430	array(
1431	'label' => __( 'Separator Color', 'premium-addons-for-elementor' ),
1432	'type' => Controls_Manager::COLOR,
1433	'global' => array(
1434	'default' => Global_Colors::COLOR_SECONDARY,
1435	),
1436	'selectors' => array(
1437	'{{WRAPPER}} .fraction-pagination-separator' => 'color: {{VALUE}}',
1438	),
1439	'condition' => array(
1440	'premium_carousel_nav_options' => 'fraction',
1441	),
1442	)
1443	);
1444
1445	$this->add_control(
1446	'premium_carousel_dot_navigation_active_color',
1447	array(
1448	'label' => __( 'Active Color', 'premium-addons-for-elementor' ),
1449	'type' => Controls_Manager::COLOR,
1450	'global' => array(
1451	'default' => Global_Colors::COLOR_PRIMARY,
1452	),
1453	'selectors' => array(
1454	'{{WRAPPER}} ul.slick-dots li.slick-active' => 'color: {{VALUE}}',
1455	'{{WRAPPER}} ul.slick-dots li.slick-active svg' => 'fill: {{VALUE}}',
1456	'{{WRAPPER}} .fraction-pagination-current' => 'color: {{VALUE}}',
1457	),
1458	'condition' => array(
1459	'premium_carousel_nav_options' => array( 'dots', 'fraction' ),
1460	),
1461	)
1462	);
1463
1464	$this->add_control(
1465	'fill_colors_title',
1466	array(
1467	'label' => __( 'Fill', 'premium-addons-for-elementor' ),
1468	'type' => Controls_Manager::HEADING,
1469	'condition' => array(
1470	'premium_carousel_nav_options' => array( 'progressbar', 'progress' ),
1471	),
1472	)
1473	);
1474
1475	$this->add_group_control(
1476	Group_Control_Background::get_type(),
1477	array(
1478	'name' => 'premium_progressbar_progress_color',
1479	'types' => array( 'classic', 'gradient' ),
1480	'selector' =>
1481	'{{WRAPPER}} .premium-carousel-nav-progressbar-fill ,{{WRAPPER}} .premium-carousel-nav-progress-fill',
1482	'condition' => array(
1483	'premium_carousel_nav_options' => array( 'progressbar', 'progress' ),
1484	),
1485	)
1486	);
1487
1488	$this->add_control(
1489	'base_colors_title',
1490	array(
1491	'label' => __( 'Base', 'premium-addons-for-elementor' ),
1492	'type' => Controls_Manager::HEADING,
1493	'condition' => array(
1494	'premium_carousel_nav_options' => array( 'progressbar', 'progress' ),
1495	),
1496	)
1497	);
1498
1499	$this->add_group_control(
1500	Group_Control_Background::get_type(),
1501	array(
1502	'name' => 'premium_progressbar_background',
1503	'types' => array( 'classic', 'gradient' ),
1504	'selector' =>
1505	'{{WRAPPER}} .premium-carousel-nav-progressbar , {{WRAPPER}} .premium-carousel-nav-progress',
1506	'condition' => array(
1507	'premium_carousel_nav_options' => array( 'progressbar', 'progress' ),
1508	),
1509	)
1510	);
1511
1512	$this->add_control(
1513	'premium_carousel_ripple_active_color',
1514	array(
1515	'label' => __( 'Active Ripple Color', 'premium-addons-for-elementor' ),
1516	'type' => Controls_Manager::COLOR,
1517	'condition' => array(
1518	'premium_carousel_navigation_effect' => 'yes',
1519	'premium_carousel_nav_options' => 'dots',
1520	),
1521	'selectors' => array(
1522	'{{WRAPPER}}.premium-carousel-ripple-yes ul.slick-dots li.slick-active:hover:before' => 'background-color: {{VALUE}}',
1523	),
1524	)
1525	);
1526
1527	$this->add_control(
1528	'premium_carousel_ripple_color',
1529	array(
1530	'label' => __( 'Inactive Ripple Color', 'premium-addons-for-elementor' ),
1531	'type' => Controls_Manager::COLOR,
1532	'condition' => array(
1533	'premium_carousel_navigation_effect' => 'yes',
1534	'premium_carousel_nav_options' => 'dots',
1535	),
1536	'selectors' => array(
1537	'{{WRAPPER}}.premium-carousel-ripple-yes ul.slick-dots li:hover:before' => 'background-color: {{VALUE}}',
1538	),
1539	)
1540	);
1541
1542	$this->end_controls_section();
1543	}
1544
1545	/**
1546	* Render Carousel widget output on the frontend.
1547	*
1548	* Written in PHP and used to generate the final HTML.
1549	*
1550	* @since 1.0.0
1551	* @access protected
1552	*/
1553	protected function render() {
1554	$settings = $this->get_settings();
1555
1556	$templates = array();
1557
1558	$templates_count = 0;
1559
1560	$content_type = 'repeater';
1561
1562	// Use the old select field only if it's value is not empty.
1563	if( ! empty ( $settings['premium_carousel_slider_content'] ) && empty( $settings['premium_carousel_templates_repeater'] ) ) {
1564	$content_type = 'select';
1565	}
1566
1567	if ( 'select' === $content_type ) {
1568	$templates = $settings['premium_carousel_slider_content'];
1569	$templates_count = ! empty( $templates ) ? count( $templates ) : 0;
1570
1571	} else {
1572	$custom_navigation = array();
1573	$temp_id = '';
1574
1575	foreach ( $settings['premium_carousel_templates_repeater'] as $template ) {
1576	$temp_id = empty( $template['premium_carousel_repeater_item'] ) ? $template['live_temp_content'] : $template['premium_carousel_repeater_item'];
1577	array_push( $templates, $temp_id );
1578	array_push( $custom_navigation, $template['custom_navigation'] );
1579	$templates_count = count( $templates );
1580	}
1581	}
1582
1583	if ( empty( $templates ) ) {
1584	return;
1585	}
1586
1587	$vertical = 'vertical' === $settings['premium_carousel_slider_type'];
1588
1589	$slides_on_desk = $settings['premium_carousel_responsive_desktop'];
1590
1591	$slides_show = ! empty( $slides_on_desk ) ? $slides_on_desk : 1;
1592
1593	$slides_on_tabs = $settings['premium_carousel_responsive_tabs'];
1594	$slides_on_mob = $settings['premium_carousel_responsive_mobile'];
1595
1596	if ( empty( $settings['premium_carousel_responsive_tabs'] ) ) {
1597	$slides_on_tabs = $slides_on_desk;
1598	}
1599
1600	if ( empty( $settings['premium_carousel_responsive_mobile'] ) ) {
1601	$slides_on_mob = $slides_on_desk;
1602	}
1603
1604	$overflow_enabled = 'yes' === $settings['overflow_slides'];
1605	$mscroll_disabled = 'yes' !== $settings['mscroll'];
1606
1607	$infinite = ! $overflow_enabled && 'yes' === $settings['premium_carousel_loop'];
1608
1609	$fade = ! $overflow_enabled && $mscroll_disabled && 'yes' === $settings['premium_carousel_fade'];
1610
1611	$speed = ! empty( $settings['premium_carousel_speed'] ) ? $settings['premium_carousel_speed'] : '';
1612
1613	$autoplay = $mscroll_disabled && 'yes' === $settings['premium_carousel_autoplay'];
1614
1615	$autoplay_speed = ! empty( $settings['premium_carousel_autoplay_speed'] ) ? $settings['premium_carousel_autoplay_speed'] : '';
1616
1617	$draggable = $mscroll_disabled && 'yes' === $settings['premium_carousel_draggable_effect'];
1618
1619	$touch_move = $mscroll_disabled && 'yes' === $settings['premium_carousel_touch_move'];
1620
1621	$variable_width = ( $mscroll_disabled && 'yes' === $settings['variable_width'] );
1622
1623	$adaptive_height = 'yes' === $settings['premium_carousel_adaptive_height'];
1624
1625	$linear = 'yes' === $settings['linear_ease'];
1626
1627	$pause_hover = 'yes' === $settings['premium_carousel_pausehover'];
1628
1629	$center_mode = ! $overflow_enabled && 'yes' === $settings['premium_carousel_center_mode'];
1630
1631	$render_arrows = $mscroll_disabled && 'yes' === $settings['premium_carousel_navigation_show'];
1632	$arrows_custom_pos = $render_arrows && 'horizontal' === $settings['premium_carousel_slider_type'] && 'default' !== $settings['arrows_position'];
1633
1634	// Navigation arrow setting setup.
1635	if ( $render_arrows ) {
1636	$arrows = true;
1637
1638	if ( 'vertical' === $settings['premium_carousel_slider_type'] ) {
1639	$vertical_alignment = 'ver-carousel-arrow';
1640	} else {
1641	$vertical_alignment = 'carousel-arrow';
1642	}
1643
1644	if ( 'vertical' === $settings['premium_carousel_slider_type'] ) {
1645
1646	if ( 'yes' !== $settings['custom_left_arrow'] ) {
1647	$icon_prev = $settings['premium_carousel_arrow_icon_prev_ver'];
1648	if ( 'left_arrow_bold' === $icon_prev ) {
1649	$icon_prev_class = 'fas fa-arrow-up';
1650	}
1651	if ( 'left_arrow_long' === $icon_prev ) {
1652	$icon_prev_class = 'fas fa-long-arrow-alt-up';
1653	}
1654	if ( 'left_arrow_long_circle' === $icon_prev ) {
1655	$icon_prev_class = 'fas fa-arrow-circle-up';
1656	}
1657	if ( 'left_arrow_angle' === $icon_prev ) {
1658	$icon_prev_class = 'fas fa-angle-up';
1659	}
1660	if ( 'left_arrow_chevron' === $icon_prev ) {
1661	$icon_prev_class = 'fas fa-chevron-up';
1662	}
1663	}
1664
1665	if ( 'yes' !== $settings['custom_right_arrow'] ) {
1666	$icon_next = $settings['premium_carousel_arrow_icon_next_ver'];
1667	if ( 'right_arrow_bold' === $icon_next ) {
1668	$icon_next_class = 'fas fa-arrow-down';
1669	}
1670	if ( 'right_arrow_long' === $icon_next ) {
1671	$icon_next_class = 'fas fa-long-arrow-alt-down';
1672	}
1673	if ( 'right_arrow_long_circle' === $icon_next ) {
1674	$icon_next_class = 'fas fa-arrow-circle-down';
1675	}
1676	if ( 'right_arrow_angle' === $icon_next ) {
1677	$icon_next_class = 'fas fa-angle-down';
1678	}
1679	if ( 'right_arrow_chevron' === $icon_next ) {
1680	$icon_next_class = 'fas fa-chevron-down';
1681	}
1682	}
1683	} else {
1684
1685	if ( 'yes' !== $settings['custom_left_arrow'] ) {
1686	$icon_prev = $settings['premium_carousel_arrow_icon_prev'];
1687	if ( 'left_arrow_bold' === $icon_prev ) {
1688	$icon_prev_class = 'fas fa-arrow-left';
1689	}
1690	if ( 'left_arrow_long' === $icon_prev ) {
1691	$icon_prev_class = 'fas fa-long-arrow-alt-left';
1692	}
1693	if ( 'left_arrow_long_circle' === $icon_prev ) {
1694	$icon_prev_class = 'fas fa-arrow-circle-left';
1695	}
1696	if ( 'left_arrow_angle' === $icon_prev ) {
1697	$icon_prev_class = 'fas fa-angle-left';
1698	}
1699	if ( 'left_arrow_chevron' === $icon_prev ) {
1700	$icon_prev_class = 'fas fa-chevron-left';
1701	}
1702	}
1703
1704	if ( 'yes' !== $settings['custom_right_arrow'] ) {
1705	$icon_next = $settings['premium_carousel_arrow_icon_next'];
1706	if ( 'right_arrow_bold' === $icon_next ) {
1707	$icon_next_class = 'fas fa-arrow-right';
1708	}
1709	if ( 'right_arrow_long' === $icon_next ) {
1710	$icon_next_class = 'fas fa-long-arrow-alt-right';
1711	}
1712	if ( 'right_arrow_long_circle' === $icon_next ) {
1713	$icon_next_class = 'fas fa-arrow-circle-right';
1714	}
1715	if ( 'right_arrow_angle' === $icon_next ) {
1716	$icon_next_class = 'fas fa-angle-right';
1717	}
1718	if ( 'right_arrow_chevron' === $icon_next ) {
1719	$icon_next_class = 'fas fa-chevron-right';
1720	}
1721	}
1722	}
1723	} else {
1724	$arrows = false;
1725	}
1726
1727	if ( $mscroll_disabled && 'dots' === $settings['premium_carousel_nav_options'] ) {
1728	$dots = true;
1729	if ( 'yes' !== $settings['custom_pagination_icon'] ) {
1730	if ( 'square_white' === $settings['premium_carousel_dot_icon'] ) {
1731	$dot_icon = 'far fa-square';
1732	}
1733	if ( 'square_black' === $settings['premium_carousel_dot_icon'] ) {
1734	$dot_icon = 'fas fa-square';
1735	}
1736	if ( 'circle_white' === $settings['premium_carousel_dot_icon'] ) {
1737	$dot_icon = 'fas fa-circle';
1738	}
1739	if ( 'circle_thin' === $settings['premium_carousel_dot_icon'] ) {
1740	$dot_icon = 'far fa-circle-thin';
1741	}
1742	$custom_paging = $dot_icon;
1743	}
1744	} else {
1745	$dots = false;
1746	}
1747
1748	$carouselNavigation = $settings['premium_carousel_nav_options'];
1749	$extra_class = ! empty( $settings['premium_carousel_extra_class'] ) ? ' ' . $settings['premium_carousel_extra_class'] : '';
1750
1751	$animation_class = $settings['premium_carousel_animation_list'];
1752
1753	$animation = ! empty( $animation_class ) ? 'animated ' . $animation_class : 'null';
1754
1755	$tablet_breakpoint = ! empty( $settings['premium_carousel_tablet_breakpoint'] ) ? $settings['premium_carousel_tablet_breakpoint'] : 1025;
1756
1757	$mobile_breakpoint = ! empty( $settings['premium_carousel_mobile_breakpoint'] ) ? $settings['premium_carousel_mobile_breakpoint'] : 768;
1758
1759	$carousel_settings = array(
1760	'vertical' => $vertical,
1761	'appearance' => $settings['premium_carousel_slides_to_show'],
1762	'slidesToShow' => $slides_show,
1763	'infinite' => $infinite,
1764	'speed' => $speed,
1765	'fade' => $fade,
1766	'autoplay' => $autoplay,
1767	'autoplaySpeed' => $autoplay_speed,
1768	'draggable' => $draggable,
1769	'touchMove' => $touch_move,
1770	'adaptiveHeight' => $adaptive_height,
1771	'variableWidth' => $variable_width,
1772	'cssEase' => $linear ? 'linear' : 'ease',
1773	'pauseOnHover' => $pause_hover,
1774	'centerMode' => $center_mode,
1775	'arrows' => $arrows,
1776	'dots' => $dots,
1777	'slidesDesk' => $slides_on_desk,
1778	'slidesTab' => $slides_on_tabs,
1779	'slidesMob' => $slides_on_mob,
1780	'animation' => $animation,
1781	'tabletBreak' => $tablet_breakpoint,
1782	'mobileBreak' => $mobile_breakpoint,
1783	'navigation' => 'repeater' === $content_type ? $custom_navigation : array(),
1784	'carouselNavigation' => $carouselNavigation,
1785	'templatesNumber' => $templates_count,
1786	);
1787
1788	if ( $render_arrows && $arrows_custom_pos ) {
1789	$carousel_settings['arrowCustomPos'] = true;
1790	$this->add_render_attribute( 'carousel', 'class', 'pa-has-custom-pos' );
1791	}
1792
1793	$this->add_render_attribute( 'carousel', 'id', 'premium-carousel-wrapper-' . esc_attr( $this->get_id() ) );
1794
1795	$this->add_render_attribute(
1796	'carousel',
1797	'class',
1798	array(
1799	'premium-carousel-wrapper',
1800	'premium-carousel-hidden',
1801	'carousel-wrapper-' . esc_attr( $this->get_id() ),
1802	$extra_class,
1803	)
1804	);
1805
1806	if ( 'dots' === $settings['premium_carousel_nav_options'] ) {
1807	$this->add_render_attribute( 'carousel', 'class', 'premium-carousel-dots-' . $settings['premium_carousel_dot_position'] );
1808
1809	}
1810
1811	if ( 'fraction' === $settings['premium_carousel_nav_options'] ) {
1812	$this->add_render_attribute( 'carousel', 'class', 'premium-carousel-fraction' );
1813	}
1814
1815	if ( 'progressbar' === $settings['premium_carousel_nav_options'] ) {
1816	$this->add_render_attribute( 'carousel', 'class', 'premium-carousel-progressbar' );
1817	}
1818
1819	if ( 'yes' === $settings['premium_carousel_fade'] && 'yes' === $settings['premium_carousel_zoom'] ) {
1820	$this->add_render_attribute( 'carousel', 'class', 'premium-carousel-scale' );
1821	}
1822
1823	$this->add_render_attribute( 'carousel', 'data-settings', wp_json_encode( $carousel_settings ) );
1824
1825	?>
1826
1827	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'carousel' ) ); ?>>
1828	<?php if ( 'dots' === $settings['premium_carousel_nav_options'] ) { ?>
1829	<div class="premium-carousel-nav-dot">
1830	<?php if ( $mscroll_disabled && 'yes' !== $settings['custom_pagination_icon'] ) { ?>
1831	<i class="<?php echo esc_attr( $custom_paging ); ?>" aria-hidden="true"></i>
1832	<?php
1833	} else {
1834	Icons_Manager::render_icon( $settings['custom_pagination_icon_select'], array( 'aria-hidden' => 'true' ) );
1835	}
1836	?>
1837	</div>
1838	<?php } ?>
1839	<?php
1840	if ( $render_arrows ) {
1841	if ( $arrows_custom_pos && 'above' === $settings['arrows_position'] ) {
1842	?>
1843	<div class="premium-carousel-arrows-wrapper"></div>
1844	<?php
1845	}
1846	?>
1847	<div class="premium-carousel-nav-arrow-prev">
1848	<a type="button" data-role="none" class="<?php echo esc_attr( $vertical_alignment ); ?> carousel-prev" aria-label="Previous" role="button">
1849	<?php if ( 'yes' !== $settings['custom_left_arrow'] ) { ?>
1850	<i class="<?php echo esc_attr( $icon_prev_class ); ?>" aria-hidden="true"></i>
1851	<?php
1852	} else {
1853	Icons_Manager::render_icon( $settings['custom_left_arrow_select'], array( 'aria-hidden' => 'true' ) );
1854	}
1855	?>
1856	</a>
1857	</div>
1858	<div class="premium-carousel-nav-arrow-next">
1859	<a type="button" data-role="none" class="<?php echo esc_attr( $vertical_alignment ); ?> carousel-next" aria-label="Next" role="button">
1860	<?php if ( 'yes' !== $settings['custom_right_arrow'] ) { ?>
1861	<i class="<?php echo esc_attr( $icon_next_class ); ?>" aria-hidden="true"></i>
1862	<?php
1863	} else {
1864	Icons_Manager::render_icon( $settings['custom_right_arrow_select'], array( 'aria-hidden' => 'true' ) );
1865	}
1866	?>
1867	</a>
1868	</div>
1869	<?php } ?>
1870	<div id="premium-carousel-<?php echo esc_attr( $this->get_id() ); ?>" class="premium-carousel-inner">
1871	<?php
1872	foreach ( $templates as $template_title ) :
1873	if ( ! empty( $template_title ) ) :
1874	?>
1875	<div class="premium-carousel-template item-wrapper">
1876	<?php echo Helper_Functions::render_elementor_template( $template_title ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1877	<?php if ( 'progress' === $settings['premium_carousel_nav_options'] ) { ?>
1878	<div class="premium-carousel-nav-progress">
1879	<span class="premium-carousel-nav-progress-fill"></span>
1880	</div>
1881	<?php } ?>
1882	</div>
1883	<?php
1884	endif;
1885	endforeach;
1886	?>
1887	</div>
1888	<?php if ( $render_arrows && $arrows_custom_pos && 'below' === $settings['arrows_position'] ) { ?>
1889	<div class="premium-carousel-arrows-wrapper"></div>
1890	<?php } ?>
1891	<?php if ( 'fraction' === $settings['premium_carousel_nav_options'] ) { ?>
1892	<div class="premium-carousel-nav-fraction">
1893
1894	<span id="currentSlide" class="fraction-pagination-current">1</span>
1895	<span class="fraction-pagination-separator">/</span>
1896	<span class="fraction-pagination-total">
1897	<?php echo esc_attr( $templates_count ); ?>
1898	</span>
1899	</div>
1900	<?php } elseif ( 'progressbar' === $settings['premium_carousel_nav_options'] ) { ?>
1901	<div class="premium-carousel-nav-progressbar">
1902	<span class="premium-carousel-nav-progressbar-fill"></span>
1903	</div>
1904	<?php } ?>
1905	</div>
1906	<?php
1907	}
1908	}
1909