elementor / includes / widgets / image-carousel.php

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

1,023 lines 24.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	* 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_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	'show_label' => false,
718	'condition' => [
719	'image_spacing' => 'custom',
720	'slides_to_show!' => '1',
721	],
722	'frontend_available' => true,
723	'render_type' => 'none',
724	'separator' => 'after',
725	]
726	);
727
728	$this->add_group_control(
729	Group_Control_Border::get_type(),
730	[
731	'name' => 'image_border',
732	'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image',
733	]
734	);
735
736	$this->add_control(
737	'image_border_radius',
738	[
739	'label' => esc_html__( 'Border Radius', 'elementor' ),
740	'type' => Controls_Manager::DIMENSIONS,
741	'size_units' => [ 'px', '%', 'em' ],
742	'selectors' => [
743	'{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
744	],
745	]
746	);
747
748	$this->end_controls_section();
749
750	$this->start_controls_section(
751	'section_caption',
752	[
753	'label' => esc_html__( 'Caption', 'elementor' ),
754	'tab' => Controls_Manager::TAB_STYLE,
755	'condition' => [
756	'caption_type!' => '',
757	],
758	]
759	);
760
761	$this->add_control(
762	'caption_align',
763	[
764	'label' => esc_html__( 'Alignment', 'elementor' ),
765	'type' => Controls_Manager::CHOOSE,
766	'options' => [
767	'left' => [
768	'title' => esc_html__( 'Left', 'elementor' ),
769	'icon' => 'eicon-text-align-left',
770	],
771	'center' => [
772	'title' => esc_html__( 'Center', 'elementor' ),
773	'icon' => 'eicon-text-align-center',
774	],
775	'right' => [
776	'title' => esc_html__( 'Right', 'elementor' ),
777	'icon' => 'eicon-text-align-right',
778	],
779	'justify' => [
780	'title' => esc_html__( 'Justified', 'elementor' ),
781	'icon' => 'eicon-text-align-justify',
782	],
783	],
784	'default' => 'center',
785	'selectors' => [
786	'{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
787	],
788	]
789	);
790
791	$this->add_control(
792	'caption_text_color',
793	[
794	'label' => esc_html__( 'Text Color', 'elementor' ),
795	'type' => Controls_Manager::COLOR,
796	'default' => '',
797	'selectors' => [
798	'{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
799	],
800	]
801	);
802
803	$this->add_group_control(
804	Group_Control_Typography::get_type(),
805	[
806	'name' => 'caption_typography',
807	'global' => [
808	'default' => Global_Colors::COLOR_ACCENT,
809	],
810	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
811	]
812	);
813
814	$this->add_group_control(
815	Group_Control_Text_Shadow::get_type(),
816	[
817	'name' => 'caption_shadow',
818	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
819	]
820	);
821
822	$this->end_controls_section();
823
824	}
825
826	/**
827	* Render image carousel widget output on the frontend.
828	*
829	* Written in PHP and used to generate the final HTML.
830	*
831	* @since 1.0.0
832	* @access protected
833	*/
834	protected function render() {
835	$settings = $this->get_settings_for_display();
836
837	$lazyload = 'yes' === $settings['lazyload'];
838
839	if ( empty( $settings['carousel'] ) ) {
840	return;
841	}
842
843	$slides = [];
844
845	foreach ( $settings['carousel'] as $index => $attachment ) {
846	$image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
847
848	if ( ! $image_url && isset( $attachment['url'] ) ) {
849	$image_url = $attachment['url'];
850	}
851
852	if ( $lazyload ) {
853	$image_html = '<img class="swiper-slide-image swiper-lazy" data-src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
854	} else {
855	$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
856	}
857
858	$link_tag = '';
859
860	$link = $this->get_link_url( $attachment, $settings );
861
862	if ( $link ) {
863	$link_key = 'link_' . $index;
864
865	$this->add_lightbox_data_attributes( $link_key, $attachment['id'], $settings['open_lightbox'], $this->get_id() );
866
867	if ( Plugin::$instance->editor->is_edit_mode() ) {
868	$this->add_render_attribute( $link_key, [
869	'class' => 'elementor-clickable',
870	] );
871	}
872
873	$this->add_link_attributes( $link_key, $link );
874
875	$link_tag = '<a ' . $this->get_render_attribute_string( $link_key ) . '>';
876	}
877
878	$image_caption = $this->get_image_caption( $attachment );
879
880	$slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
881
882	if ( $lazyload ) {
883	$slide_html .= '<div class="swiper-lazy-preloader"></div>';
884	}
885
886	if ( ! empty( $image_caption ) ) {
887	$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
888	}
889
890	$slide_html .= '</figure>';
891
892	if ( $link ) {
893	$slide_html .= '</a>';
894	}
895
896	$slide_html .= '</div>';
897
898	$slides[] = $slide_html;
899
900	}
901
902	if ( empty( $slides ) ) {
903	return;
904	}
905
906	$this->add_render_attribute( [
907	'carousel' => [
908	'class' => 'elementor-image-carousel swiper-wrapper',
909	],
910	'carousel-wrapper' => [
911	'class' => 'elementor-image-carousel-wrapper swiper-container',
912	'dir' => $settings['direction'],
913	],
914	] );
915
916	$show_dots = ( in_array( $settings['navigation'], [ 'dots', 'both' ] ) );
917	$show_arrows = ( in_array( $settings['navigation'], [ 'arrows', 'both' ] ) );
918
919	if ( 'yes' === $settings['image_stretch'] ) {
920	$this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
921	}
922
923	$slides_count = count( $settings['carousel'] );
924
925	?>
926	<div <?php $this->print_render_attribute_string( 'carousel-wrapper' ); ?>>
927	<div <?php $this->print_render_attribute_string( 'carousel' ); ?>>
928	<?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?>
929	<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
930	</div>
931	<?php if ( 1 < $slides_count ) : ?>
932	<?php if ( $show_dots ) : ?>
933	<div class="swiper-pagination"></div>
934	<?php endif; ?>
935	<?php if ( $show_arrows ) : ?>
936	<div class="elementor-swiper-button elementor-swiper-button-prev">
937	<?php $this->render_swiper_button( 'previous' ); ?>
938	<span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'elementor' ); ?></span>
939	</div>
940	<div class="elementor-swiper-button elementor-swiper-button-next">
941	<?php $this->render_swiper_button( 'next' ); ?>
942	<span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'elementor' ); ?></span>
943	</div>
944	<?php endif; ?>
945	<?php endif; ?>
946	</div>
947	<?php
948	}
949
950	/**
951	* Retrieve image carousel link URL.
952	*
953	* @since 1.0.0
954	* @access private
955	*
956	* @param array $attachment
957	* @param object $instance
958	*
959	* @return array\|string\|false An array/string containing the attachment URL, or false if no link.
960	*/
961	private function get_link_url( $attachment, $instance ) {
962	if ( 'none' === $instance['link_to'] ) {
963	return false;
964	}
965
966	if ( 'custom' === $instance['link_to'] ) {
967	if ( empty( $instance['link']['url'] ) ) {
968	return false;
969	}
970
971	return $instance['link'];
972	}
973
974	return [
975	'url' => wp_get_attachment_url( $attachment['id'] ),
976	];
977	}
978
979	/**
980	* Retrieve image carousel caption.
981	*
982	* @since 1.2.0
983	* @access private
984	*
985	* @param array $attachment
986	*
987	* @return string The caption of the image.
988	*/
989	private function get_image_caption( $attachment ) {
990	$caption_type = $this->get_settings_for_display( 'caption_type' );
991
992	if ( empty( $caption_type ) ) {
993	return '';
994	}
995
996	$attachment_post = get_post( $attachment['id'] );
997
998	if ( 'caption' === $caption_type ) {
999	return $attachment_post->post_excerpt;
1000	}
1001
1002	if ( 'title' === $caption_type ) {
1003	return $attachment_post->post_title;
1004	}
1005
1006	return $attachment_post->post_content;
1007	}
1008
1009	private function render_swiper_button( $type ) {
1010	$direction = 'next' === $type ? 'right' : 'left';
1011	$icon_settings = $this->get_settings_for_display( 'navigation_' . $type . '_icon' );
1012
1013	if ( empty( $icon_settings['value'] ) ) {
1014	$icon_settings = [
1015	'library' => 'eicons',
1016	'value' => 'eicon-chevron-' . $direction,
1017	];
1018	}
1019
1020	Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] );
1021	}
1022	}
1023