elementor / includes / widgets / image-carousel.php

image-carousel.php in Elementor Website Builder – more than just a page builder 3.25.7, at includes/widgets/image-carousel.php

1,091 lines 26.8 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9
10	/**
11	* Elementor image carousel widget.
12	*
13	* Elementor widget that displays a set of images in a rotating carousel or
14	* slider.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Image_Carousel extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve image carousel widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'image-carousel';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve image carousel widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Image Carousel', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve image carousel widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-slider-push';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.1.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'image', 'photo', 'visual', 'carousel', 'slider' ];
74	}
75
76	protected function is_dynamic_content(): bool {
77	return false;
78	}
79
80	/**
81	* Get style dependencies.
82	*
83	* Retrieve the list of style dependencies the widget requires.
84	*
85	* @since 3.24.0
86	* @access public
87	*
88	* @return array Widget style dependencies.
89	*/
90	public function get_style_depends(): array {
91	return [ 'e-swiper', 'widget-image-carousel' ];
92	}
93
94	/**
95	* Get widget upsale data.
96	*
97	* Retrieve the widget promotion data.
98	*
99	* @since 3.18.0
100	* @access protected
101	*
102	* @return array Widget promotion data.
103	*/
104	protected function get_upsale_data() {
105	return [
106	'condition' => ! Utils::has_pro(),
107	'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
108	'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
109	'description' => esc_html__( 'Gain complete freedom to design every slide with Elementor"s Pro Carousel.', 'elementor' ),
110	'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-image-carousel-widget/' ),
111	'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
112	];
113	}
114
115	/**
116	* Register image carousel widget controls.
117	*
118	* Adds different input fields to allow the user to change and customize the widget settings.
119	*
120	* @since 3.1.0
121	* @access protected
122	*/
123	protected function register_controls() {
124	$this->start_controls_section(
125	'section_image_carousel',
126	[
127	'label' => esc_html__( 'Image Carousel', 'elementor' ),
128	]
129	);
130
131	$this->add_control(
132	'carousel',
133	[
134	'label' => esc_html__( 'Add Images', 'elementor' ),
135	'type' => Controls_Manager::GALLERY,
136	'default' => [],
137	'show_label' => false,
138	'dynamic' => [
139	'active' => true,
140	],
141	]
142	);
143
144	$this->add_group_control(
145	Group_Control_Image_Size::get_type(),
146	[
147	'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
148	]
149	);
150
151	$slides_to_show = range( 1, 10 );
152	$slides_to_show = array_combine( $slides_to_show, $slides_to_show );
153
154	$this->add_responsive_control(
155	'slides_to_show',
156	[
157	'label' => esc_html__( 'Slides to Show', 'elementor' ),
158	'type' => Controls_Manager::SELECT,
159	'options' => [
160	'' => esc_html__( 'Default', 'elementor' ),
161	] + $slides_to_show,
162	'frontend_available' => true,
163	'render_type' => 'template',
164	'selectors' => [
165	'{{WRAPPER}}' => '--e-image-carousel-slides-to-show: {{VALUE}}',
166	],
167	'content_classes' => 'elementor-control-field-select-small',
168	]
169	);
170
171	$this->add_responsive_control(
172	'slides_to_scroll',
173	[
174	'label' => esc_html__( 'Slides to Scroll', 'elementor' ),
175	'type' => Controls_Manager::SELECT,
176	'description' => esc_html__( 'Set how many slides are scrolled per swipe.', 'elementor' ),
177	'options' => [
178	'' => esc_html__( 'Default', 'elementor' ),
179	] + $slides_to_show,
180	'condition' => [
181	'slides_to_show!' => '1',
182	],
183	'frontend_available' => true,
184	'content_classes' => 'elementor-control-field-select-small',
185	]
186	);
187
188	$this->add_control(
189	'image_stretch',
190	[
191	'label' => esc_html__( 'Image Stretch', 'elementor' ),
192	'type' => Controls_Manager::SELECT,
193	'default' => 'no',
194	'options' => [
195	'no' => esc_html__( 'No', 'elementor' ),
196	'yes' => esc_html__( 'Yes', 'elementor' ),
197	],
198	]
199	);
200
201	$this->add_control(
202	'navigation',
203	[
204	'label' => esc_html__( 'Navigation', 'elementor' ),
205	'type' => Controls_Manager::SELECT,
206	'default' => 'both',
207	'options' => [
208	'both' => esc_html__( 'Arrows and Dots', 'elementor' ),
209	'arrows' => esc_html__( 'Arrows', 'elementor' ),
210	'dots' => esc_html__( 'Dots', 'elementor' ),
211	'none' => esc_html__( 'None', 'elementor' ),
212	],
213	'frontend_available' => true,
214	]
215	);
216
217	$this->add_control(
218	'navigation_previous_icon',
219	[
220	'label' => esc_html__( 'Previous Arrow Icon', 'elementor' ),
221	'type' => Controls_Manager::ICONS,
222	'fa4compatibility' => 'icon',
223	'skin' => 'inline',
224	'label_block' => false,
225	'skin_settings' => [
226	'inline' => [
227	'none' => [
228	'label' => 'Default',
229	'icon' => 'eicon-chevron-left',
230	],
231	'icon' => [
232	'icon' => 'eicon-star',
233	],
234	],
235	],
236	'recommended' => [
237	'fa-regular' => [
238	'arrow-alt-circle-left',
239	'caret-square-left',
240	],
241	'fa-solid' => [
242	'angle-double-left',
243	'angle-left',
244	'arrow-alt-circle-left',
245	'arrow-circle-left',
246	'arrow-left',
247	'caret-left',
248	'caret-square-left',
249	'chevron-circle-left',
250	'chevron-left',
251	'long-arrow-alt-left',
252	],
253	],
254	'conditions' => [
255	'relation' => 'or',
256	'terms' => [
257	[
258	'name' => 'navigation',
259	'operator' => '=',
260	'value' => 'both',
261	],
262	[
263	'name' => 'navigation',
264	'operator' => '=',
265	'value' => 'arrows',
266	],
267	],
268	],
269	]
270	);
271
272	$this->add_control(
273	'navigation_next_icon',
274	[
275	'label' => esc_html__( 'Next Arrow Icon', 'elementor' ),
276	'type' => Controls_Manager::ICONS,
277	'fa4compatibility' => 'icon',
278	'skin' => 'inline',
279	'label_block' => false,
280	'skin_settings' => [
281	'inline' => [
282	'none' => [
283	'label' => 'Default',
284	'icon' => 'eicon-chevron-right',
285	],
286	'icon' => [
287	'icon' => 'eicon-star',
288	],
289	],
290	],
291	'recommended' => [
292	'fa-regular' => [
293	'arrow-alt-circle-right',
294	'caret-square-right',
295	],
296	'fa-solid' => [
297	'angle-double-right',
298	'angle-right',
299	'arrow-alt-circle-right',
300	'arrow-circle-right',
301	'arrow-right',
302	'caret-right',
303	'caret-square-right',
304	'chevron-circle-right',
305	'chevron-right',
306	'long-arrow-alt-right',
307	],
308	],
309	'conditions' => [
310	'relation' => 'or',
311	'terms' => [
312	[
313	'name' => 'navigation',
314	'operator' => '=',
315	'value' => 'both',
316	],
317	[
318	'name' => 'navigation',
319	'operator' => '=',
320	'value' => 'arrows',
321	],
322	],
323	],
324	]
325	);
326
327	$this->add_control(
328	'link_to',
329	[
330	'label' => esc_html__( 'Link', 'elementor' ),
331	'type' => Controls_Manager::SELECT,
332	'default' => 'none',
333	'options' => [
334	'none' => esc_html__( 'None', 'elementor' ),
335	'file' => esc_html__( 'Media File', 'elementor' ),
336	'custom' => esc_html__( 'Custom URL', 'elementor' ),
337	],
338	]
339	);
340
341	$this->add_control(
342	'link',
343	[
344	'label' => esc_html__( 'Link', 'elementor' ),
345	'type' => Controls_Manager::URL,
346	'condition' => [
347	'link_to' => 'custom',
348	],
349	'show_label' => false,
350	'dynamic' => [
351	'active' => true,
352	],
353	]
354	);
355
356	$this->add_control(
357	'open_lightbox',
358	[
359	'label' => esc_html__( 'Lightbox', 'elementor' ),
360	'type' => Controls_Manager::SELECT,
361	'description' => sprintf(
362	/* translators: 1: Link open tag, 2: Link close tag. */
363	esc_html__( 'Manage your site’s lightbox settings in the %1$sLightbox panel%2$s.', 'elementor' ),
364	'<a href="javascript: $e.run( \'panel/global/open\' ).then( () => $e.route( \'panel/global/settings-lightbox\' ) )">',
365	'</a>'
366	),
367	'default' => 'default',
368	'options' => [
369	'default' => esc_html__( 'Default', 'elementor' ),
370	'yes' => esc_html__( 'Yes', 'elementor' ),
371	'no' => esc_html__( 'No', 'elementor' ),
372	],
373	'condition' => [
374	'link_to' => 'file',
375	],
376	]
377	);
378
379	$this->add_control(
380	'caption_type',
381	[
382	'label' => esc_html__( 'Caption', 'elementor' ),
383	'type' => Controls_Manager::SELECT,
384	'default' => '',
385	'options' => [
386	'' => esc_html__( 'None', 'elementor' ),
387	'title' => esc_html__( 'Title', 'elementor' ),
388	'caption' => esc_html__( 'Caption', 'elementor' ),
389	'description' => esc_html__( 'Description', 'elementor' ),
390	],
391	]
392	);
393
394	$this->end_controls_section();
395
396	$this->start_controls_section(
397	'section_additional_options',
398	[
399	'label' => esc_html__( 'Additional Options', 'elementor' ),
400	]
401	);
402
403	$this->add_control(
404	'lazyload',
405	[
406	'label' => esc_html__( 'Lazyload', 'elementor' ),
407	'type' => Controls_Manager::SWITCHER,
408	'frontend_available' => true,
409	]
410	);
411
412	$this->add_control(
413	'autoplay',
414	[
415	'label' => esc_html__( 'Autoplay', 'elementor' ),
416	'type' => Controls_Manager::SWITCHER,
417	'label_on' => esc_html__( 'Yes', 'elementor' ),
418	'label_off' => esc_html__( 'No', 'elementor' ),
419	'return_value' => 'yes',
420	'default' => 'yes',
421	'frontend_available' => true,
422	]
423	);
424
425	$this->add_control(
426	'pause_on_hover',
427	[
428	'label' => esc_html__( 'Pause on Hover', 'elementor' ),
429	'type' => Controls_Manager::SWITCHER,
430	'label_on' => esc_html__( 'Yes', 'elementor' ),
431	'label_off' => esc_html__( 'No', 'elementor' ),
432	'return_value' => 'yes',
433	'default' => 'yes',
434	'condition' => [
435	'autoplay' => 'yes',
436	],
437	'render_type' => 'none',
438	'frontend_available' => true,
439	]
440	);
441
442	$this->add_control(
443	'pause_on_interaction',
444	[
445	'label' => esc_html__( 'Pause on Interaction', 'elementor' ),
446	'type' => Controls_Manager::SWITCHER,
447	'label_on' => esc_html__( 'Yes', 'elementor' ),
448	'label_off' => esc_html__( 'No', 'elementor' ),
449	'return_value' => 'yes',
450	'default' => 'yes',
451	'condition' => [
452	'autoplay' => 'yes',
453	],
454	'frontend_available' => true,
455	]
456	);
457
458	$this->add_control(
459	'autoplay_speed',
460	[
461	'label' => esc_html__( 'Autoplay Speed', 'elementor' ),
462	'type' => Controls_Manager::NUMBER,
463	'default' => 5000,
464	'condition' => [
465	'autoplay' => 'yes',
466	],
467	'render_type' => 'none',
468	'frontend_available' => true,
469	]
470	);
471
472	// Loop requires a re-render so no 'render_type = none'
473	$this->add_control(
474	'infinite',
475	[
476	'label' => esc_html__( 'Infinite Loop', 'elementor' ),
477	'type' => Controls_Manager::SWITCHER,
478	'label_on' => esc_html__( 'Yes', 'elementor' ),
479	'label_off' => esc_html__( 'No', 'elementor' ),
480	'return_value' => 'yes',
481	'default' => 'yes',
482	'frontend_available' => true,
483	]
484	);
485
486	$this->add_control(
487	'effect',
488	[
489	'label' => esc_html__( 'Effect', 'elementor' ),
490	'type' => Controls_Manager::SELECT,
491	'default' => 'slide',
492	'options' => [
493	'slide' => esc_html__( 'Slide', 'elementor' ),
494	'fade' => esc_html__( 'Fade', 'elementor' ),
495	],
496	'condition' => [
497	'slides_to_show' => '1',
498	],
499	'frontend_available' => true,
500	]
501	);
502
503	$this->add_control(
504	'speed',
505	[
506	'label' => esc_html__( 'Animation Speed', 'elementor' ),
507	'type' => Controls_Manager::NUMBER,
508	'default' => 500,
509	'render_type' => 'none',
510	'frontend_available' => true,
511	]
512	);
513
514	$this->add_control(
515	'direction',
516	[
517	'label' => esc_html__( 'Direction', 'elementor' ),
518	'type' => Controls_Manager::SELECT,
519	'default' => 'ltr',
520	'options' => [
521	'ltr' => esc_html__( 'Left', 'elementor' ),
522	'rtl' => esc_html__( 'Right', 'elementor' ),
523	],
524	]
525	);
526
527	$this->end_controls_section();
528
529	$this->start_controls_section(
530	'section_style_navigation',
531	[
532	'label' => esc_html__( 'Navigation', 'elementor' ),
533	'tab' => Controls_Manager::TAB_STYLE,
534	'condition' => [
535	'navigation' => [ 'arrows', 'dots', 'both' ],
536	],
537	]
538	);
539
540	$this->add_control(
541	'heading_style_arrows',
542	[
543	'label' => esc_html__( 'Arrows', 'elementor' ),
544	'type' => Controls_Manager::HEADING,
545	'separator' => 'before',
546	'condition' => [
547	'navigation' => [ 'arrows', 'both' ],
548	],
549	]
550	);
551
552	$this->add_control(
553	'arrows_position',
554	[
555	'label' => esc_html__( 'Position', 'elementor' ),
556	'type' => Controls_Manager::SELECT,
557	'default' => 'inside',
558	'options' => [
559	'inside' => esc_html__( 'Inside', 'elementor' ),
560	'outside' => esc_html__( 'Outside', 'elementor' ),
561	],
562	'prefix_class' => 'elementor-arrows-position-',
563	'condition' => [
564	'navigation' => [ 'arrows', 'both' ],
565	],
566	]
567	);
568
569	$this->add_responsive_control(
570	'arrows_size',
571	[
572	'label' => esc_html__( 'Size', 'elementor' ),
573	'type' => Controls_Manager::SLIDER,
574	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
575	'range' => [
576	'px' => [
577	'max' => 100,
578	],
579	],
580	'selectors' => [
581	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
582	],
583	'condition' => [
584	'navigation' => [ 'arrows', 'both' ],
585	],
586	]
587	);
588
589	$this->add_control(
590	'arrows_color',
591	[
592	'label' => esc_html__( 'Color', 'elementor' ),
593	'type' => Controls_Manager::COLOR,
594	'selectors' => [
595	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'color: {{VALUE}};',
596	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev svg, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next svg' => 'fill: {{VALUE}};',
597	],
598	'condition' => [
599	'navigation' => [ 'arrows', 'both' ],
600	],
601	]
602	);
603
604	$this->add_control(
605	'heading_style_dots',
606	[
607	'label' => esc_html__( 'Pagination', 'elementor' ),
608	'type' => Controls_Manager::HEADING,
609	'separator' => 'before',
610	'condition' => [
611	'navigation' => [ 'dots', 'both' ],
612	],
613	]
614	);
615
616	$this->add_control(
617	'dots_position',
618	[
619	'label' => esc_html__( 'Position', 'elementor' ),
620	'type' => Controls_Manager::SELECT,
621	'default' => 'outside',
622	'options' => [
623	'outside' => esc_html__( 'Outside', 'elementor' ),
624	'inside' => esc_html__( 'Inside', 'elementor' ),
625	],
626	'prefix_class' => 'elementor-pagination-position-',
627	'condition' => [
628	'navigation' => [ 'dots', 'both' ],
629	],
630	]
631	);
632
633	$this->add_responsive_control(
634	'dots_size',
635	[
636	'label' => esc_html__( 'Size', 'elementor' ),
637	'type' => Controls_Manager::SLIDER,
638	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
639	'range' => [
640	'px' => [
641	'max' => 20,
642	],
643	],
644	'selectors' => [
645	'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
646	],
647	'condition' => [
648	'navigation' => [ 'dots', 'both' ],
649	],
650	]
651	);
652
653	$this->add_control(
654	'dots_inactive_color',
655	[
656	'label' => esc_html__( 'Color', 'elementor' ),
657	'type' => Controls_Manager::COLOR,
658	'selectors' => [
659	// The opacity property will override the default inactive dot color which is opacity 0.2.
660	'{{WRAPPER}} .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)' => 'background: {{VALUE}}; opacity: 1',
661	],
662	'condition' => [
663	'navigation' => [ 'dots', 'both' ],
664	],
665	]
666	);
667
668	$this->add_control(
669	'dots_color',
670	[
671	'label' => esc_html__( 'Active Color', 'elementor' ),
672	'type' => Controls_Manager::COLOR,
673	'selectors' => [
674	'{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
675	],
676	'condition' => [
677	'navigation' => [ 'dots', 'both' ],
678	],
679	]
680	);
681
682	$this->end_controls_section();
683
684	$this->start_controls_section(
685	'section_style_image',
686	[
687	'label' => esc_html__( 'Image', 'elementor' ),
688	'tab' => Controls_Manager::TAB_STYLE,
689	]
690	);
691
692	$this->add_responsive_control(
693	'gallery_vertical_align',
694	[
695	'label' => esc_html__( 'Vertical Align', 'elementor' ),
696	'type' => Controls_Manager::CHOOSE,
697	'options' => [
698	'flex-start' => [
699	'title' => esc_html__( 'Start', 'elementor' ),
700	'icon' => 'eicon-v-align-top',
701	],
702	'center' => [
703	'title' => esc_html__( 'Center', 'elementor' ),
704	'icon' => 'eicon-v-align-middle',
705	],
706	'flex-end' => [
707	'title' => esc_html__( 'End', 'elementor' ),
708	'icon' => 'eicon-v-align-bottom',
709	],
710	],
711	'condition' => [
712	'slides_to_show!' => '1',
713	],
714	'selectors' => [
715	'{{WRAPPER}} .swiper-wrapper' => 'display: flex; align-items: {{VALUE}};',
716	],
717	]
718	);
719
720	$this->add_control(
721	'image_spacing',
722	[
723	'label' => esc_html__( 'Spacing', 'elementor' ),
724	'type' => Controls_Manager::SELECT,
725	'options' => [
726	'' => esc_html__( 'Default', 'elementor' ),
727	'custom' => esc_html__( 'Custom', 'elementor' ),
728	],
729	'default' => '',
730	'condition' => [
731	'slides_to_show!' => '1',
732	],
733	]
734	);
735
736	$this->add_responsive_control(
737	'image_spacing_custom',
738	[
739	'label' => esc_html__( 'Image Spacing', 'elementor' ),
740	'type' => Controls_Manager::SLIDER,
741	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
742	'range' => [
743	'px' => [
744	'max' => 100,
745	],
746	],
747	'default' => [
748	'size' => 20,
749	],
750	'condition' => [
751	'image_spacing' => 'custom',
752	'slides_to_show!' => '1',
753	],
754	'frontend_available' => true,
755	'render_type' => 'none',
756	'separator' => 'after',
757	]
758	);
759
760	$this->add_group_control(
761	Group_Control_Border::get_type(),
762	[
763	'name' => 'image_border',
764	'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image',
765	]
766	);
767
768	$this->add_responsive_control(
769	'image_border_radius',
770	[
771	'label' => esc_html__( 'Border Radius', 'elementor' ),
772	'type' => Controls_Manager::DIMENSIONS,
773	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
774	'selectors' => [
775	'{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
776	],
777	]
778	);
779
780	$this->end_controls_section();
781
782	$this->start_controls_section(
783	'section_caption',
784	[
785	'label' => esc_html__( 'Caption', 'elementor' ),
786	'tab' => Controls_Manager::TAB_STYLE,
787	'condition' => [
788	'caption_type!' => '',
789	],
790	]
791	);
792
793	$this->add_responsive_control(
794	'caption_align',
795	[
796	'label' => esc_html__( 'Alignment', 'elementor' ),
797	'type' => Controls_Manager::CHOOSE,
798	'options' => [
799	'left' => [
800	'title' => esc_html__( 'Left', 'elementor' ),
801	'icon' => 'eicon-text-align-left',
802	],
803	'center' => [
804	'title' => esc_html__( 'Center', 'elementor' ),
805	'icon' => 'eicon-text-align-center',
806	],
807	'right' => [
808	'title' => esc_html__( 'Right', 'elementor' ),
809	'icon' => 'eicon-text-align-right',
810	],
811	'justify' => [
812	'title' => esc_html__( 'Justified', 'elementor' ),
813	'icon' => 'eicon-text-align-justify',
814	],
815	],
816	'default' => 'center',
817	'selectors' => [
818	'{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
819	],
820	]
821	);
822
823	$this->add_control(
824	'caption_text_color',
825	[
826	'label' => esc_html__( 'Text Color', 'elementor' ),
827	'type' => Controls_Manager::COLOR,
828	'default' => '',
829	'selectors' => [
830	'{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
831	],
832	]
833	);
834
835	$this->add_group_control(
836	Group_Control_Typography::get_type(),
837	[
838	'name' => 'caption_typography',
839	'global' => [
840	'default' => Global_Colors::COLOR_ACCENT,
841	],
842	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
843	]
844	);
845
846	$this->add_group_control(
847	Group_Control_Text_Shadow::get_type(),
848	[
849	'name' => 'caption_shadow',
850	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
851	]
852	);
853
854	$this->add_responsive_control(
855	'caption_space',
856	[
857	'label' => esc_html__( 'Spacing', 'elementor' ),
858	'type' => Controls_Manager::SLIDER,
859	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
860	'selectors' => [
861	'{{WRAPPER}} .elementor-image-carousel-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
862	],
863	]
864	);
865
866	$this->end_controls_section();
867	}
868
869	/**
870	* Render image carousel widget output on the frontend.
871	*
872	* Written in PHP and used to generate the final HTML.
873	*
874	* @since 1.0.0
875	* @access protected
876	*/
877	protected function render() {
878	$settings = $this->get_settings_for_display();
879
880	$lazyload = 'yes' === $settings['lazyload'];
881
882	if ( empty( $settings['carousel'] ) ) {
883	return;
884	}
885
886	$slides = [];
887
888	foreach ( $settings['carousel'] as $index => $attachment ) {
889	$image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
890
891	if ( ! $image_url && isset( $attachment['url'] ) ) {
892	$image_url = $attachment['url'];
893	}
894
895	if ( $lazyload ) {
896	$image_html = '<img class="swiper-slide-image swiper-lazy" data-src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
897	} else {
898	$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
899	}
900
901	$link_tag = '';
902
903	$link = $this->get_link_url( $attachment, $settings );
904
905	if ( $link ) {
906	$link_key = 'link_' . $index;
907
908	$this->add_lightbox_data_attributes( $link_key, $attachment['id'], $settings['open_lightbox'], $this->get_id() );
909
910	if ( Plugin::$instance->editor->is_edit_mode() ) {
911	$this->add_render_attribute( $link_key, [
912	'class' => 'elementor-clickable',
913	] );
914	}
915
916	$this->add_link_attributes( $link_key, $link );
917
918	$link_tag = '<a ' . $this->get_render_attribute_string( $link_key ) . '>';
919	}
920
921	$image_caption = $this->get_image_caption( $attachment );
922
923	$slide_count = $index + 1;
924	$slide_setting_key = 'swiper_slide_' . $index;
925
926	$this->add_render_attribute( $slide_setting_key, [
927	'class' => 'swiper-slide',
928	'role' => 'group',
929	'aria-roledescription' => 'slide',
930	'aria-label' => sprintf(
931	/* translators: 1: Slide count, 2: Total slides count. */
932	esc_html__( '%1$s of %2$s', 'elementor' ),
933	$slide_count,
934	count( $settings['carousel'] )
935	),
936	] );
937
938	$slide_html = '<div ' . $this->get_render_attribute_string( $slide_setting_key ) . '>' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
939
940	if ( $lazyload ) {
941	$slide_html .= '<div class="swiper-lazy-preloader"></div>';
942	}
943
944	if ( ! empty( $image_caption ) ) {
945	$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
946	}
947
948	$slide_html .= '</figure>';
949
950	if ( $link ) {
951	$slide_html .= '</a>';
952	}
953
954	$slide_html .= '</div>';
955
956	$slides[] = $slide_html;
957
958	}
959
960	if ( empty( $slides ) ) {
961	return;
962	}
963
964	$swiper_class = Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ? 'swiper' : 'swiper-container';
965	$has_autoplay_enabled = 'yes' === $this->get_settings_for_display( 'autoplay' );
966
967	$this->add_render_attribute( [
968	'carousel' => [
969	'class' => 'elementor-image-carousel swiper-wrapper',
970	'aria-live' => $has_autoplay_enabled ? 'off' : 'polite',
971	],
972	'carousel-wrapper' => [
973	'class' => 'elementor-image-carousel-wrapper ' . $swiper_class,
974	'dir' => $settings['direction'],
975	],
976	] );
977
978	$show_dots = ( in_array( $settings['navigation'], [ 'dots', 'both' ] ) );
979	$show_arrows = ( in_array( $settings['navigation'], [ 'arrows', 'both' ] ) );
980
981	if ( 'yes' === $settings['image_stretch'] ) {
982	$this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
983	}
984
985	$slides_count = count( $settings['carousel'] );
986	?>
987	<div <?php $this->print_render_attribute_string( 'carousel-wrapper' ); ?>>
988	<div <?php $this->print_render_attribute_string( 'carousel' ); ?>>
989	<?php // PHPCS - $slides contains the slides content, all the relevant content is escaped above. ?>
990	<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
991	</div>
992	<?php if ( 1 < $slides_count ) : ?>
993	<?php if ( $show_arrows ) : ?>
994	<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
995	<?php $this->render_swiper_button( 'previous' ); ?>
996	</div>
997	<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
998	<?php $this->render_swiper_button( 'next' ); ?>
999	</div>
1000	<?php endif; ?>
1001
1002	<?php if ( $show_dots ) : ?>
1003	<div class="swiper-pagination"></div>
1004	<?php endif; ?>
1005	<?php endif; ?>
1006	</div>
1007	<?php
1008	}
1009
1010	/**
1011	* Retrieve image carousel link URL.
1012	*
1013	* @since 1.0.0
1014	* @access private
1015	*
1016	* @param array $attachment
1017	* @param object $instance
1018	*
1019	* @return array\|string\|false An array/string containing the attachment URL, or false if no link.
1020	*/
1021	private function get_link_url( $attachment, $instance ) {
1022	if ( 'none' === $instance['link_to'] ) {
1023	return false;
1024	}
1025
1026	if ( 'custom' === $instance['link_to'] ) {
1027	if ( empty( $instance['link']['url'] ) ) {
1028	return false;
1029	}
1030
1031	return $instance['link'];
1032	}
1033
1034	return [
1035	'url' => wp_get_attachment_url( $attachment['id'] ),
1036	];
1037	}
1038
1039	/**
1040	* Retrieve image carousel caption.
1041	*
1042	* @since 1.2.0
1043	* @access private
1044	*
1045	* @param array $attachment
1046	*
1047	* @return string The caption of the image.
1048	*/
1049	private function get_image_caption( $attachment ) {
1050	$caption_type = $this->get_settings_for_display( 'caption_type' );
1051
1052	if ( empty( $caption_type ) ) {
1053	return '';
1054	}
1055
1056	$attachment_post = get_post( $attachment['id'] );
1057
1058	if ( Utils::has_invalid_post_permissions( $attachment_post ) ) {
1059	return '';
1060	}
1061
1062	if ( 'caption' === $caption_type ) {
1063	return $attachment_post->post_excerpt;
1064	}
1065
1066	if ( 'title' === $caption_type ) {
1067	return $attachment_post->post_title;
1068	}
1069
1070	if ( empty( $attachment_post->post_content ) ) {
1071	return '';
1072	}
1073
1074	return $attachment_post->post_content;
1075	}
1076
1077	private function render_swiper_button( $type ) {
1078	$direction = 'next' === $type ? 'right' : 'left';
1079	$icon_settings = $this->get_settings_for_display( 'navigation_' . $type . '_icon' );
1080
1081	if ( empty( $icon_settings['value'] ) ) {
1082	$icon_settings = [
1083	'library' => 'eicons',
1084	'value' => 'eicon-chevron-' . $direction,
1085	];
1086	}
1087
1088	Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] );
1089	}
1090	}
1091