elementor / includes / widgets / image-carousel.php

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

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