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

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

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

premium-carousel.php

1646 lines

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