elementor / includes / widgets / image-carousel.php

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

1,053 lines 25.7 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->add_control(
364	'view',
365	[
366	'label' => esc_html__( 'View', 'elementor' ),
367	'type' => Controls_Manager::HIDDEN,
368	'default' => 'traditional',
369	]
370	);
371
372	$this->end_controls_section();
373
374	$this->start_controls_section(
375	'section_additional_options',
376	[
377	'label' => esc_html__( 'Additional Options', 'elementor' ),
378	]
379	);
380
381	$this->add_control(
382	'lazyload',
383	[
384	'label' => esc_html__( 'Lazyload', 'elementor' ),
385	'type' => Controls_Manager::SWITCHER,
386	'frontend_available' => true,
387	]
388	);
389
390	$this->add_control(
391	'autoplay',
392	[
393	'label' => esc_html__( 'Autoplay', 'elementor' ),
394	'type' => Controls_Manager::SELECT,
395	'default' => 'yes',
396	'options' => [
397	'yes' => esc_html__( 'Yes', 'elementor' ),
398	'no' => esc_html__( 'No', 'elementor' ),
399	],
400	'frontend_available' => true,
401	]
402	);
403
404	$this->add_control(
405	'pause_on_hover',
406	[
407	'label' => esc_html__( 'Pause on Hover', 'elementor' ),
408	'type' => Controls_Manager::SELECT,
409	'default' => 'yes',
410	'options' => [
411	'yes' => esc_html__( 'Yes', 'elementor' ),
412	'no' => esc_html__( 'No', 'elementor' ),
413	],
414	'condition' => [
415	'autoplay' => 'yes',
416	],
417	'render_type' => 'none',
418	'frontend_available' => true,
419	]
420	);
421
422	$this->add_control(
423	'pause_on_interaction',
424	[
425	'label' => esc_html__( 'Pause on Interaction', 'elementor' ),
426	'type' => Controls_Manager::SELECT,
427	'default' => 'yes',
428	'options' => [
429	'yes' => esc_html__( 'Yes', 'elementor' ),
430	'no' => esc_html__( 'No', 'elementor' ),
431	],
432	'condition' => [
433	'autoplay' => 'yes',
434	],
435	'frontend_available' => true,
436	]
437	);
438
439	$this->add_control(
440	'autoplay_speed',
441	[
442	'label' => esc_html__( 'Autoplay Speed', 'elementor' ),
443	'type' => Controls_Manager::NUMBER,
444	'default' => 5000,
445	'condition' => [
446	'autoplay' => 'yes',
447	],
448	'render_type' => 'none',
449	'frontend_available' => true,
450	]
451	);
452
453	// Loop requires a re-render so no 'render_type = none'
454	$this->add_control(
455	'infinite',
456	[
457	'label' => esc_html__( 'Infinite Loop', 'elementor' ),
458	'type' => Controls_Manager::SELECT,
459	'default' => 'yes',
460	'options' => [
461	'yes' => esc_html__( 'Yes', 'elementor' ),
462	'no' => esc_html__( 'No', 'elementor' ),
463	],
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->end_controls_section();
837	}
838
839	/**
840	* Render image carousel widget output on the frontend.
841	*
842	* Written in PHP and used to generate the final HTML.
843	*
844	* @since 1.0.0
845	* @access protected
846	*/
847	protected function render() {
848	$settings = $this->get_settings_for_display();
849
850	$lazyload = 'yes' === $settings['lazyload'];
851
852	if ( empty( $settings['carousel'] ) ) {
853	return;
854	}
855
856	$slides = [];
857
858	foreach ( $settings['carousel'] as $index => $attachment ) {
859	$image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
860
861	if ( ! $image_url && isset( $attachment['url'] ) ) {
862	$image_url = $attachment['url'];
863	}
864
865	if ( $lazyload ) {
866	$image_html = '<img class="swiper-slide-image swiper-lazy" data-src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
867	} else {
868	$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
869	}
870
871	$link_tag = '';
872
873	$link = $this->get_link_url( $attachment, $settings );
874
875	if ( $link ) {
876	$link_key = 'link_' . $index;
877
878	$this->add_lightbox_data_attributes( $link_key, $attachment['id'], $settings['open_lightbox'], $this->get_id() );
879
880	if ( Plugin::$instance->editor->is_edit_mode() ) {
881	$this->add_render_attribute( $link_key, [
882	'class' => 'elementor-clickable',
883	] );
884	}
885
886	$this->add_link_attributes( $link_key, $link );
887
888	$link_tag = '<a ' . $this->get_render_attribute_string( $link_key ) . '>';
889	}
890
891	$image_caption = $this->get_image_caption( $attachment );
892
893	$slide_count = $index + 1;
894	$slide_setting_key = 'swiper_slide_' . $index;
895
896	$this->add_render_attribute( $slide_setting_key, [
897	'class' => 'swiper-slide',
898	'role' => 'group',
899	'aria-roledescription' => 'slide',
900	'aria-label' => sprintf(
901	/* translators: 1: Slide count, 2: Total slides count. */
902	esc_html__( '%1$s of %2$s', 'elementor' ),
903	$slide_count,
904	count( $settings['carousel'] )
905	),
906	] );
907
908	$slide_html = '<div ' . $this->get_render_attribute_string( $slide_setting_key ) . '>' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
909
910	if ( $lazyload ) {
911	$slide_html .= '<div class="swiper-lazy-preloader"></div>';
912	}
913
914	if ( ! empty( $image_caption ) ) {
915	$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
916	}
917
918	$slide_html .= '</figure>';
919
920	if ( $link ) {
921	$slide_html .= '</a>';
922	}
923
924	$slide_html .= '</div>';
925
926	$slides[] = $slide_html;
927
928	}
929
930	if ( empty( $slides ) ) {
931	return;
932	}
933
934	$swiper_class = Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ? 'swiper' : 'swiper-container';
935	$has_autoplay_enabled = 'yes' === $this->get_settings_for_display( 'autoplay' );
936
937	$this->add_render_attribute( [
938	'carousel' => [
939	'class' => 'elementor-image-carousel swiper-wrapper',
940	'aria-live' => $has_autoplay_enabled ? 'off' : 'polite',
941	],
942	'carousel-wrapper' => [
943	'class' => 'elementor-image-carousel-wrapper ' . $swiper_class,
944	'dir' => $settings['direction'],
945	],
946	] );
947
948	$show_dots = ( in_array( $settings['navigation'], [ 'dots', 'both' ] ) );
949	$show_arrows = ( in_array( $settings['navigation'], [ 'arrows', 'both' ] ) );
950
951	if ( 'yes' === $settings['image_stretch'] ) {
952	$this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
953	}
954
955	$slides_count = count( $settings['carousel'] );
956	?>
957	<div <?php $this->print_render_attribute_string( 'carousel-wrapper' ); ?>>
958	<div <?php $this->print_render_attribute_string( 'carousel' ); ?>>
959	<?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?>
960	<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
961	</div>
962	<?php if ( 1 < $slides_count ) : ?>
963	<?php if ( $show_arrows ) : ?>
964	<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
965	<?php $this->render_swiper_button( 'previous' ); ?>
966	</div>
967	<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
968	<?php $this->render_swiper_button( 'next' ); ?>
969	</div>
970	<?php endif; ?>
971
972	<?php if ( $show_dots ) : ?>
973	<div class="swiper-pagination"></div>
974	<?php endif; ?>
975	<?php endif; ?>
976	</div>
977	<?php
978	}
979
980	/**
981	* Retrieve image carousel link URL.
982	*
983	* @since 1.0.0
984	* @access private
985	*
986	* @param array $attachment
987	* @param object $instance
988	*
989	* @return array\|string\|false An array/string containing the attachment URL, or false if no link.
990	*/
991	private function get_link_url( $attachment, $instance ) {
992	if ( 'none' === $instance['link_to'] ) {
993	return false;
994	}
995
996	if ( 'custom' === $instance['link_to'] ) {
997	if ( empty( $instance['link']['url'] ) ) {
998	return false;
999	}
1000
1001	return $instance['link'];
1002	}
1003
1004	return [
1005	'url' => wp_get_attachment_url( $attachment['id'] ),
1006	];
1007	}
1008
1009	/**
1010	* Retrieve image carousel caption.
1011	*
1012	* @since 1.2.0
1013	* @access private
1014	*
1015	* @param array $attachment
1016	*
1017	* @return string The caption of the image.
1018	*/
1019	private function get_image_caption( $attachment ) {
1020	$caption_type = $this->get_settings_for_display( 'caption_type' );
1021
1022	if ( empty( $caption_type ) ) {
1023	return '';
1024	}
1025
1026	$attachment_post = get_post( $attachment['id'] );
1027
1028	if ( 'caption' === $caption_type ) {
1029	return $attachment_post->post_excerpt;
1030	}
1031
1032	if ( 'title' === $caption_type ) {
1033	return $attachment_post->post_title;
1034	}
1035
1036	return $attachment_post->post_content;
1037	}
1038
1039	private function render_swiper_button( $type ) {
1040	$direction = 'next' === $type ? 'right' : 'left';
1041	$icon_settings = $this->get_settings_for_display( 'navigation_' . $type . '_icon' );
1042
1043	if ( empty( $icon_settings['value'] ) ) {
1044	$icon_settings = [
1045	'library' => 'eicons',
1046	'value' => 'eicon-chevron-' . $direction,
1047	];
1048	}
1049
1050	Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] );
1051	}
1052	}
1053