master-addons / addons / slider / ma-image-carousel / ma-image-carousel.php

ma-image-carousel.php in Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits 3.0.9, at addons/slider/ma-image-carousel/ma-image-carousel.php

873 lines 27.0 KB

Raw Download Zip

1	<?php
2
3	namespace MasterAddons\Addons;
4
5	// Elementor Classes
6	use MasterAddons\Inc\Classes\Base\Master_Widget;
7	use \Elementor\Utils;
8	use \Elementor\Repeater;
9	use \Elementor\Icons_Manager;
10	use \Elementor\Controls_Manager;
11	use \Elementor\Group_Control_Border;
12	use \Elementor\Group_Control_Text_Shadow;
13	use \Elementor\Group_Control_Typography;
14	use \Elementor\Group_Control_Image_Size;
15	use \Elementor\Group_Control_Css_Filter;
16	use \Elementor\Group_Control_Background;
17	use \Elementor\Core\Kits\Documents\Tabs\Global_Colors;
18	use \Elementor\Core\Kits\Documents\Tabs\Global_Typography;
19
20	// Master Addons Classes
21	use MasterAddons\Inc\Traits\JLTMA_Swiper_Controls;
22	use MasterAddons\Inc\Classes\Helper;
23	use MasterAddons\Inc\Admin\Config;
24
25	/**
26	* Author Name: Liton Arefin
27	* Author URL: https://jeweltheme.com
28	* Date: 10/26/19
29	*/
30
31	// Exit if accessed directly.
32	if (!defined('ABSPATH')) {
33	exit;
34	}
35
36	if (!defined('ABSPATH')) exit; // If this file is called directly, abort.
37
38	class Image_Carousel extends Master_Widget
39	{
40	use JLTMA_Swiper_Controls;
41	use \MasterAddons\Inc\Traits\Widget_Notice;
42	use \MasterAddons\Inc\Traits\Widget_Assets_Trait;
43
44	public function get_name()
45	{
46	return 'ma-image-carousel';
47	}
48
49	public function get_title()
50	{
51	return __('Image Carousel', 'master-addons' );
52	}
53
54	public function get_icon()
55	{
56	return 'jltma-icon ' . Config::get_addon_icon($this->get_name());
57	}
58
59	public function get_keywords()
60	{
61	return ['image', 'image carousel', 'slider', 'image slider', 'carousel text', 'Image Carousel with Text'];
62	}
63
64
65	protected function jltma_image_carousel_images_controls()
66	{
67
68	$this->start_controls_section(
69	'ma_el_image_carousel',
70	[
71	'label' => __('Images', 'master-addons' ),
72	]
73	);
74	$this->add_control(
75	'jltma_image_carousel_images',
76	[
77	'label' => esc_html__( 'Carousel Images', 'plugin-name' ),
78	'type' => \Elementor\Controls_Manager::GALLERY,
79	'default' => [
80	[
81	'id' => 0,
82	'url' => Utils::get_placeholder_image_src()
83	],
84	[
85	'id' => 0,
86	'url' => Utils::get_placeholder_image_src()
87	],
88	[
89	'id' => 0,
90	'url' => Utils::get_placeholder_image_src()
91	],
92	[
93	'id' => 0,
94	'url' => Utils::get_placeholder_image_src()
95	],
96	[
97	'id' => 0,
98	'url' => Utils::get_placeholder_image_src()
99	]
100	],
101	]
102	);
103
104	$this->add_group_control(
105	Group_Control_Image_Size::get_type(),
106	[
107	'name' => 'jltma_image_carousel_image',
108	'default' => 'medium',
109	'separator' => 'before'
110	]
111	);
112
113	$this->add_control(
114	'enable_lightbox',
115	[
116	'type' => Controls_Manager::SWITCHER,
117	'label_off' => esc_html__('No', 'master-addons' ),
118	'label_on' => esc_html__('Yes', 'master-addons' ),
119	'return_value' => 'yes',
120	'default' => 'yes',
121	'label' => esc_html__('Enable Lightbox Gallery?', 'master-addons' ),
122	'frontend_available' => true
123	]
124	);
125
126	$this->add_control(
127	'lightbox_library',
128	[
129	'type' => Controls_Manager::SELECT,
130	'label' => esc_html__('Lightbox Library', 'master-addons' ),
131	'description' => esc_html__('Choose the preferred library for the lightbox', 'master-addons' ),
132	'options' => array(
133	'fancybox' => esc_html__('Fancybox', 'master-addons' ),
134	'elementor' => esc_html__('Elementor', 'master-addons' ),
135	),
136	'default' => 'fancybox',
137	'condition' => [
138	'enable_lightbox' => 'yes',
139	],
140	]
141	);
142
143	$this->end_controls_section();
144	}
145
146	protected function register_controls()
147	{
148
149	$this->jltma_image_carousel_images_controls();
150
151	// Global Navigation Controls
152	$this->start_controls_section(
153	'section_content_navigation',
154	[
155	'label' => __('Navigation', 'master-addons' ),
156	]
157	);
158	$this->jltma_swiper_navigation_controls();
159	$this->end_controls_section();
160
161	// Global Swiper Control Settings
162	$this->start_controls_section(
163	'section_carousel_settings',
164	[
165	'label' => __('Carousel Settings', 'master-addons' ),
166	]
167	);
168
169	$slides_per_column = range(1, 6);
170	$slides_per_column = array_combine($slides_per_column, $slides_per_column);
171
172	$this->add_responsive_control(
173	'columns',
174	[
175	'type' => Controls_Manager::SELECT,
176	'label' => __('Slides per Column', 'master-addons' ),
177	'description' => __('For Vertical direction this defines the number of slides per row.', 'master-addons' ),
178	'options' => ['' => __('Default', 'master-addons' )] + $slides_per_column,
179	'default' => 4,
180	]
181	);
182
183	$this->jltma_swiper_settings_controls();
184
185	$this->end_controls_section();
186
187	// Global Swiper Item Style
188	$this->jltma_swiper_item_style_controls('image-carousel');
189
190	//Lightbox Style
191	$this->start_controls_section(
192	'section_style_lightbox',
193	[
194	'label' => __('Lightbox', 'master-addons' ),
195	'tab' => Controls_Manager::TAB_STYLE,
196	'condition' => [
197	'enable_lightbox' => 'yes',
198	],
199	]
200	);
201	$this->add_control(
202	'image_carousel_caption_preview_icon_style',
203	[
204	'label' => __('Preview Icon', 'master-addons' ),
205	'type' => Controls_Manager::HEADING,
206	'separator' => 'before',
207
208	]
209
210	);
211	$this->add_control(
212	'preview_icon',
213	[
214	'label' => esc_html__('Custom Preview Icon', 'master-addons' ),
215	'description' => __('Please choose an icon from the list.', 'master-addons' ),
216	'type' => Controls_Manager::ICONS,
217	'fa4compatibility' => 'icon',
218	'render_type' => 'template',
219	'condition' => [
220	'enable_lightbox' => 'yes',
221	],
222	]
223	);
224	$this->add_control(
225	'image_carousel_caption_preview_icon_color',
226	[
227	'label' => __('Icon Color', 'master-addons' ),
228	'type' => Controls_Manager::COLOR,
229	'default' => '',
230	'selectors' => [
231	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a i' => 'color: {{VALUE}};',
232	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a svg' => 'fill : {{VALUE}};',
233	],
234	'global' => [
235	'default' => Global_Colors::COLOR_PRIMARY,
236	],
237	]
238	);
239
240	$this->add_control(
241	'image_carousel_caption_preview_icon_color_hover',
242	[
243	'label' => __('Icon Color Hover', 'master-addons' ),
244	'type' => Controls_Manager::COLOR,
245	'default' => '',
246	'selectors' => [
247	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a i:hover' => 'color: {{VALUE}};',
248	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a svg:hover' => 'fill: {{VALUE}}',
249	],
250
251	]
252	);
253
254	$this->add_control(
255	'image_carousel_caption_preview_icon_size',
256	[
257	'label' => __('Icon Size', 'master-addons' ),
258	'type' => Controls_Manager::SLIDER,
259	'range' => [
260	'px' => [
261	'min' => 6,
262	'max' => 300,
263	],
264	],
265	'default' => [
266	'size' => '20',
267	'unit' => 'px',
268	],
269	'selectors' => [
270	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a i' => 'font-size: {{SIZE}}{{UNIT}};',
271	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a svg' => 'height : {{SIZE}}{{UNIT}}; width : {{SIZE}}{{UNIT}};',
272	],
273	]
274	);
275
276	$this->add_control(
277	'image_carousel_caption_preview_icon_space_to_left',
278	[
279	'label' => __('Icon Gap to Left', 'master-addons' ),
280	'type' => Controls_Manager::SLIDER,
281	'range' => [
282	'px' => [
283	'min' => -100,
284	'max' => 300,
285	],
286	],
287	'default' => [
288	'size' => '20',
289	'unit' => 'px',
290	],
291	'selectors' => [
292	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a i, {{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a svg' => 'right: {{SIZE}}{{UNIT}};',
293	],
294	]
295	);
296	$this->add_control(
297	'image_carousel_caption_preview_icon_space_to_top',
298	[
299	'label' => __('Icon Gap to Top', 'master-addons' ),
300	'type' => Controls_Manager::SLIDER,
301	'range' => [
302	'px' => [
303	'min' => -100,
304	'max' => 300,
305	],
306	],
307	'default' => [
308	'size' => '20',
309	'unit' => 'px',
310	],
311	'selectors' => [
312	'{{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a i, {{WRAPPER}} .jltma-image-carousel-slider .jltma-image-carousel-figure a svg' => 'top: {{SIZE}}{{UNIT}};',
313	],
314	]
315	);
316
317	$this->add_control(
318	'image_carousel_lightbox_background',
319	[
320	'label' => __('Overlay', 'master-addons' ),
321	'type' => Controls_Manager::HEADING,
322	'separator' => 'before',
323	]
324
325	);
326
327	$this->add_group_control(
328	Group_Control_Background::get_type(),
329	[
330	'name' => 'image_carousel_overlay_color',
331	'label' => __('Color', 'master-addons' ),
332	'types' => ['none', 'classic', 'gradient'],
333	'selector' => '.dialog-lightbox-widget.dialog-type-lightbox.elementor-lightbox, .fancybox-container.fancybox-is-open .fancybox-bg',
334	]
335	);
336
337	$this->add_control(
338	'image_carousel_caption_title_style',
339	[
340	'label' => __('Caption Title', 'master-addons' ),
341	'type' => Controls_Manager::HEADING,
342	'separator' => 'before',
343	]
344
345	);
346
347	$this->add_group_control(
348	Group_Control_Typography::get_type(),
349	[
350	'name' => 'image_carousel_caption_title_typography',
351	'label' => __('Typography', 'master-addons' ),
352	'global' => [
353	'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
354	],
355	'selector' => '.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title',
356	]
357	);
358
359	$this->add_group_control(
360	Group_Control_Background::get_type(),
361	[
362	'name' => 'image_carousel_caption_title_bgcolor',
363	'label' => __('Color', 'master-addons' ),
364	'types' => ['none', 'classic', 'gradient'],
365	'selector' => '.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title',
366	]
367	);
368
369	$this->add_control(
370	'image_carousel_caption_title_color',
371	[
372	'label' => __('Color', 'master-addons' ),
373	'type' => Controls_Manager::COLOR,
374	'selectors' => [
375	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title' => 'color:{{VALUE}};'
376	],
377	'global' => [
378	'default' => Global_Colors::COLOR_PRIMARY,
379	]
380	]
381	);
382
383	$this->add_control(
384	'image_carousel_caption_title_color_hover',
385	[
386	'label' => __('Hover Color', 'master-addons' ),
387	'type' => Controls_Manager::COLOR,
388	'selectors' => [
389	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title:hover' => 'color:{{VALUE}};'
390	]
391	]
392	);
393
394	$this->add_control(
395	'image_carousel_caption_title_padding',
396	[
397	'label' => __('Padding', 'master-addons' ),
398	'type' => Controls_Manager::SLIDER,
399	'selectors' => [
400	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title' => 'padding: {{SIZE}}{{UNIT}};',
401	],
402	'range' => [
403	'em' => [
404	'min' => 0,
405	'max' => 5,
406	],
407	]
408
409	]
410	);
411
412	$this->add_control(
413	'image_carousel_caption_title_margin',
414	[
415	'label' => __('Margin', 'master-addons' ),
416	'type' => Controls_Manager::SLIDER,
417	'selectors' => [
418	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title' => 'margin: {{SIZE}}{{UNIT}};',
419	],
420	'range' => [
421	'em' => [
422	'min' => 0,
423	'max' => 5,
424	],
425	]
426
427	]
428	);
429
430	$this->add_control(
431	'image_carousel_caption_title_rotate',
432	[
433	'label' => __('Rotate', 'master-addons' ),
434	'type' => Controls_Manager::SLIDER,
435	'default' => [
436	'size' => 0,
437	'unit' => 'deg',
438	],
439	'selectors' => [
440	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title' => 'transform: rotate({{SIZE}}{{UNIT}});',
441	]
442	]
443	);
444
445	$this->add_group_control(
446	Group_Control_Border::get_type(),
447	[
448	'name' => 'image_carousel_caption_title_border',
449	'label' => __('Border', 'master-addons' ),
450	'selector' => '.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title',
451	]
452	);
453
454	$this->add_control(
455	'image_carousel_caption_title_border_radious',
456	[
457	'label' => __('Border Radius', 'master-addons' ),
458	'type' => Controls_Manager::DIMENSIONS,
459	'size_units' => ['px', '%'],
460	'selectors' => [
461	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__title, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
462	],
463	]
464	);
465
466	$this->add_control(
467	'image_carousel_caption_subtitle_style',
468	[
469	'label' => __('Caption Subtitle', 'master-addons' ),
470	'type' => Controls_Manager::HEADING,
471	'separator' => 'before',
472	]
473
474	);
475
476	$this->add_group_control(
477	Group_Control_Typography::get_type(),
478	[
479	'name' => 'image_carousel_caption_subtitle_typography',
480	'label' => __('Typography', 'master-addons' ),
481	'global' => [
482	'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
483	],
484	'selector' => '.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle',
485	]
486	);
487
488	$this->add_group_control(
489	Group_Control_Background::get_type(),
490	[
491	'name' => 'image_carousel_caption_subtitle_bgcolor',
492	'label' => __('Color', 'master-addons' ),
493	'types' => ['none', 'classic', 'gradient'],
494	'selector' => '.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle',
495	]
496	);
497
498	$this->add_control(
499	'image_carousel_caption_subtitle_color',
500	[
501	'label' => __('Color', 'master-addons' ),
502	'type' => Controls_Manager::COLOR,
503	'selectors' => [
504	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle' => 'color:{{VALUE}};'
505	],
506	'global' => [
507	'default' => Global_Colors::COLOR_PRIMARY,
508	],
509	]
510	);
511
512	$this->add_control(
513	'image_carousel_caption_subtitle_color_hover',
514	[
515	'label' => __('Hover Color', 'master-addons' ),
516	'type' => Controls_Manager::COLOR,
517	'selectors' => [
518	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle:hover' => 'color:{{VALUE}};'
519	],
520	]
521	);
522
523	$this->add_control(
524	'image_carousel_caption_subtitle_padding',
525	[
526	'label' => __('Padding', 'master-addons' ),
527	'type' => Controls_Manager::SLIDER,
528	'selectors' => [
529	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle' => 'padding: {{SIZE}}{{UNIT}};',
530	],
531	'range' => [
532	'em' => [
533	'min' => 0,
534	'max' => 5,
535	],
536	],
537
538	]
539	);
540
541	$this->add_control(
542	'image_carousel_caption_subtitle_margin',
543	[
544	'label' => __('Margin', 'master-addons' ),
545	'type' => Controls_Manager::SLIDER,
546	'selectors' => [
547	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle' => 'margin: {{SIZE}}{{UNIT}};',
548	],
549	'range' => [
550	'em' => [
551	'min' => 0,
552	'max' => 5,
553	],
554	],
555
556	]
557	);
558
559	$this->add_control(
560	'image_carousel_caption_subtitle_rotate',
561	[
562	'label' => __('Rotate', 'master-addons' ),
563	'type' => Controls_Manager::SLIDER,
564	'default' => [
565	'size' => 0,
566	'unit' => 'deg',
567	],
568	'selectors' => [
569	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle' => 'transform: rotate({{SIZE}}{{UNIT}});',
570	],
571	]
572	);
573
574	$this->add_group_control(
575	Group_Control_Border::get_type(),
576	[
577	'name' => 'image_carousel_caption_subtitle_border',
578	'label' => __('Border', 'master-addons' ),
579	'selector' => '.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle',
580	]
581	);
582
583	$this->add_control(
584	'image_carousel_caption_subtitle_border_radious',
585	[
586	'label' => __('Border Radius', 'master-addons' ),
587	'type' => Controls_Manager::DIMENSIONS,
588	'size_units' => ['px', '%'],
589	'selectors' => [
590	'.elementor-lightbox .dialog-message .elementor-slideshow__footer .elementor-slideshow__description, .fancybox-container.fancybox-is-open .fancybox-caption__body .jltma-fancybox-caption .jltma-image-carousel-subtitle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
591	],
592	]
593	);
594
595	$this->end_controls_section();
596
597	//Navigation Style
598	$this->start_controls_section(
599	'section_style_navigation',
600	[
601	'label' => __('Navigation', 'master-addons' ),
602	'tab' => Controls_Manager::TAB_STYLE,
603	'conditions' => [
604	'relation' => 'or',
605	'terms' => [
606	[
607	'name' => 'navigation',
608	'operator' => '!=',
609	'value' => 'none',
610	],
611	[
612	'name' => 'show_scrollbar',
613	'value' => 'yes',
614	],
615	],
616	],
617	]
618	);
619
620	// Global Navigation Style Controls
621	$this->jltma_swiper_navigation_style_controls('image-carousel');
622
623	$this->end_controls_section();
624
625	// Help Docs section (links from config.php)
626	$this->jltma_help_docs();
627
628	$this->upgrade_to_pro_message();
629
630	}
631
632	// Render Header
633	private function jltma_render_image_carousel_header()
634	{
635	$settings = $this->get_settings_for_display();
636
637	// if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
638	// $this->add_render_attribute( 'link', [
639	// 'class' => 'elementor-clickable',
640	// ] );
641	// }
642
643	//Global Header Function
644	$this->jltma_render_swiper_header_attribute('image-carousel');
645
646	$unique_id = implode('-', [$this->get_id(), get_the_ID()]);
647
648	$this->add_render_attribute([
649	'jltma-img-carousel-wrapper' => [
650	'class' => [
651	'jltma-image-carousel-wrapper',
652	'jltma-carousel',
653	'jltma-swiper',
654	'jltma-swiper__container',
655	'swiper',
656	'elementor-jltma-element-' . esc_attr($unique_id)
657	],
658	'data-image-carousel-template-widget-id' => $unique_id
659	],
660	'swiper-wrapper' => [
661	'class' => [
662	'jltma-image-carousel',
663	'jltma-swiper__wrapper',
664	'swiper-wrapper',
665	],
666	],
667
668	'swiper-item' => [
669	'class' => [
670	'jltma-slider__item',
671	'jltma-swiper__slide',
672	'swiper-slide'
673	],
674	],
675	]);
676
677	$this->add_render_attribute('carousel', 'class', ['jltma-image-carousel-slider']);
678	?>
679	<div <?php echo $this->get_render_attribute_string('carousel'); ?>>
680	<div <?php echo $this->get_render_attribute_string('jltma-img-carousel-wrapper'); ?>>
681	<div <?php echo $this->get_render_attribute_string('swiper-wrapper'); ?>>
682
683	<?php
684	}
685
686	// Render Header
687	private function jltma_render_image_carousel_loop_item()
688	{
689	$settings = $this->get_settings_for_display();
690
691	// $slider_items = $settings['jltma_image_carousel_items'];
692	$slider_items = $settings['jltma_image_carousel_images'];
693
694	if (empty($slider_items)) {
695	return;
696	}
697
698	if (count($slider_items) > 1) {
699
700	foreach ($slider_items as $index => $item) {
701
702	$demo_image = Utils::get_placeholder_image_src();
703	$image_id = $item['id'];
704	$image = $item['url'];
705	if (empty($image)) {
706	$image = $demo_image;
707	}
708
709	$repeater_key = 'jltma_image_carousel_images' . esc_attr($index);
710	$repeater_key_lightbox = 'jltma_image_carousel_images' . esc_attr($index);
711	$repeater_key = 'carousel_item' . esc_attr($index);
712	$this->add_render_attribute([
713	$repeater_key => [
714	'class' => [
715	'jltma-slider__item',
716	'jltma-swiper__slide',
717	'swiper-slide',
718	],
719	]
720	]);
721
722	$tag = 'div';
723	$image_title = get_post_field('post_title', $image_id);
724	$image_caption = get_post_field('post_excerpt', $image_id);
725	$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
726	$this->add_render_attribute($repeater_key_lightbox, 'class', 'jltma-image-carousel-slider-item');
727
728	// Website Links
729	if ( $settings['enable_lightbox'] == "yes" ) {
730	$popup_tag = 'a';
731	$title_text = !empty($image_title) ? '<h4 class="jltma-image-carousel-title">'.$image_title.'</h4>' : '';
732	$caption_text = !empty($image_caption) ? '<p class="jltma-image-carousel-subtitle">'.$image_caption.'</p>' : '';
733	$caption_data = (!empty($image_title) \|\| !empty($image_caption)) ? '<div class="jltma-fancybox-caption">' . $title_text . $caption_text . '</div>' : '';
734	$this->add_render_attribute($repeater_key_lightbox, 'class', 'jltma-image-slider-link');
735	$this->add_render_attribute($repeater_key_lightbox, 'href', $image);
736	}
737
738	// Lightbox Conditions
739	if ($settings['enable_lightbox'] == "yes") {
740
741	$anchor_type = 'jltma-click-icon';
742
743	if ($settings['lightbox_library'] == 'fancybox') {
744
745	$this->add_render_attribute([
746	$repeater_key_lightbox => [
747	'class' => [
748	'jltma-lightbox-item ' . esc_attr($anchor_type),
749	'elementor-clickable',
750	'jltma-fancybox'
751	],
752	'data-fancybox' => "gallery",
753	'data-elementor-lightbox-slideshow' => esc_attr($this->get_id()),
754	'data-elementor-open-lightbox' => "no",
755	'data-caption' => $caption_data
756	]
757	]);
758	} elseif ($settings['lightbox_library'] == 'elementor') {
759
760	$this->add_render_attribute([
761	$repeater_key_lightbox => [
762	'class' => [
763	'jltma-lightbox-item-' . esc_attr($anchor_type),
764	'elementor-clickable',
765	],
766	'data-thumb' => $image,
767	'data-elementor-open-lightbox' => "yes",
768	'data-elementor-lightbox-title' => $image_title ?: '',
769	'data-elementor-lightbox-description' => $image_caption ?: '',
770	]
771	]);
772	}
773	}
774	$image_size = $settings['jltma_image_carousel_image_size'];
775	if( $image_size == 'custom' ){
776	$image_size = array_values($settings['jltma_image_carousel_image_custom_dimension']);
777	}
778	?>
779	<<?php echo esc_attr($tag); ?> <?php echo $this->get_render_attribute_string($repeater_key); ?>>
780
781	<figure class="jltma-image-carousel-figure">
782
783	<?php
784	if ($settings['enable_lightbox'] == "yes") { ?>
785	<<?php echo esc_attr($popup_tag); ?> <?php echo $this->get_render_attribute_string($repeater_key_lightbox); ?>>
786	<?php if ( (!empty($settings['icon']) \|\| !empty($settings['preview_icon']['value']))) {
787	if (!isset($settings['icon']) && !Icons_Manager::is_migration_allowed()) {
788	$settings['icon'] = 'fa-link';
789	}
790
791	$has_icon = !empty($settings['icon']);
792	if ($has_icon and 'icon' == $settings['preview_icon']) {
793	$this->add_render_attribute('jltma-icon', 'class', $settings['preview_icon']);
794	$this->add_render_attribute('jltma-icon', 'aria-hidden', 'true');
795	}
796
797	if (!$has_icon && !empty($settings['preview_icon']['value'])) {
798	$has_icon = true;
799	}
800
801	$migrated = isset($settings['__fa4_migrated']['preview_icon']);
802	$is_new = empty($settings['icon']) && Icons_Manager::is_migration_allowed();
803
804	if ($is_new \|\| $migrated) {
805	Icons_Manager::render_icon($settings['preview_icon'], ['aria-hidden' => 'true']);
806	} else {
807	echo '<i ' . $this->get_render_attribute_string('jltma-icon') . '></i>';
808	}
809	}else{
810	echo '<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M210,229.236V90H90v150h90.935L272,369.004v-52.215L210,229.236z M180,210h-60v-90h60V210z"/></g></g><g><g><path d="M0,0v512h512V0H0z M482,482H30V30h452V482z"/></g></g><g><g><path d="M330.031,272L240,142.997v52.214l62,89.135V422h120V272H330.031z M392,392h-60v-90h60V392z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>';
811	} ?>
812	</<?php echo esc_attr($popup_tag); ?>>
813
814	<?php }
815
816	if (isset($image_id) && $image_id) {
817	echo wp_get_attachment_image(
818	$image_id,
819	$image_size,
820	false,
821	[
822	'class' => 'jltma-carousel-img elementor-animation-',
823	'alt' => esc_attr($image_alt),
824	]
825	);
826	} else {
827	echo "<img src=" . esc_url( $image ) . ">";
828	}
829
830	?>
831	</figure>
832
833	</<?php echo esc_attr($tag); ?>>
834
835	<?php
836
837	} // end of foreach
838
839	}
840	}
841
842	// Render Header
843	private function jltma_render_image_carousel_footer()
844	{
845	$settings = $this->get_settings_for_display();
846	?>
847
848	</div> <!-- swiper-wrapper -->
849
850	</div>
851	<!--/.ma-image-carousel-->
852
853	<?php $this->render_swiper_navigation(); ?>
854
855	<?php if ('yes' === $settings['show_scrollbar']) { ?>
856	<div class="swiper-scrollbar"></div>
857	<?php } ?>
858
859	</div>
860	<!--/.carousel-attribute-->
861	<?php
862
863	}
864
865	// Render Function
866	protected function render()
867	{
868	$this->jltma_render_image_carousel_header();
869	$this->jltma_render_image_carousel_loop_item();
870	$this->jltma_render_image_carousel_footer();
871	}
872	}
873