elementor / includes / widgets / image-carousel.php

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

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