elementor / includes / widgets / image-carousel.php

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

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