balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

image-carousel.php (20872B)


      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 			'link_to',
    179 			[
    180 				'label' => esc_html__( 'Link', 'elementor' ),
    181 				'type' => Controls_Manager::SELECT,
    182 				'default' => 'none',
    183 				'options' => [
    184 					'none' => esc_html__( 'None', 'elementor' ),
    185 					'file' => esc_html__( 'Media File', 'elementor' ),
    186 					'custom' => esc_html__( 'Custom URL', 'elementor' ),
    187 				],
    188 			]
    189 		);
    190 
    191 		$this->add_control(
    192 			'link',
    193 			[
    194 				'label' => esc_html__( 'Link', 'elementor' ),
    195 				'type' => Controls_Manager::URL,
    196 				'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
    197 				'condition' => [
    198 					'link_to' => 'custom',
    199 				],
    200 				'show_label' => false,
    201 			]
    202 		);
    203 
    204 		$this->add_control(
    205 			'open_lightbox',
    206 			[
    207 				'label' => esc_html__( 'Lightbox', 'elementor' ),
    208 				'type' => Controls_Manager::SELECT,
    209 				'default' => 'default',
    210 				'options' => [
    211 					'default' => esc_html__( 'Default', 'elementor' ),
    212 					'yes' => esc_html__( 'Yes', 'elementor' ),
    213 					'no' => esc_html__( 'No', 'elementor' ),
    214 				],
    215 				'condition' => [
    216 					'link_to' => 'file',
    217 				],
    218 			]
    219 		);
    220 
    221 		$this->add_control(
    222 			'caption_type',
    223 			[
    224 				'label' => esc_html__( 'Caption', 'elementor' ),
    225 				'type' => Controls_Manager::SELECT,
    226 				'default' => '',
    227 				'options' => [
    228 					'' => esc_html__( 'None', 'elementor' ),
    229 					'title' => esc_html__( 'Title', 'elementor' ),
    230 					'caption' => esc_html__( 'Caption', 'elementor' ),
    231 					'description' => esc_html__( 'Description', 'elementor' ),
    232 				],
    233 			]
    234 		);
    235 
    236 		$this->add_control(
    237 			'view',
    238 			[
    239 				'label' => esc_html__( 'View', 'elementor' ),
    240 				'type' => Controls_Manager::HIDDEN,
    241 				'default' => 'traditional',
    242 			]
    243 		);
    244 
    245 		$this->end_controls_section();
    246 
    247 		$this->start_controls_section(
    248 			'section_additional_options',
    249 			[
    250 				'label' => esc_html__( 'Additional Options', 'elementor' ),
    251 			]
    252 		);
    253 
    254 		$this->add_control(
    255 			'autoplay',
    256 			[
    257 				'label' => esc_html__( 'Autoplay', 'elementor' ),
    258 				'type' => Controls_Manager::SELECT,
    259 				'default' => 'yes',
    260 				'options' => [
    261 					'yes' => esc_html__( 'Yes', 'elementor' ),
    262 					'no' => esc_html__( 'No', 'elementor' ),
    263 				],
    264 				'frontend_available' => true,
    265 			]
    266 		);
    267 
    268 		$this->add_control(
    269 			'pause_on_hover',
    270 			[
    271 				'label' => esc_html__( 'Pause on Hover', 'elementor' ),
    272 				'type' => Controls_Manager::SELECT,
    273 				'default' => 'yes',
    274 				'options' => [
    275 					'yes' => esc_html__( 'Yes', 'elementor' ),
    276 					'no' => esc_html__( 'No', 'elementor' ),
    277 				],
    278 				'condition' => [
    279 					'autoplay' => 'yes',
    280 				],
    281 				'render_type' => 'none',
    282 				'frontend_available' => true,
    283 			]
    284 		);
    285 
    286 		$this->add_control(
    287 			'pause_on_interaction',
    288 			[
    289 				'label' => esc_html__( 'Pause on Interaction', 'elementor' ),
    290 				'type' => Controls_Manager::SELECT,
    291 				'default' => 'yes',
    292 				'options' => [
    293 					'yes' => esc_html__( 'Yes', 'elementor' ),
    294 					'no' => esc_html__( 'No', 'elementor' ),
    295 				],
    296 				'condition' => [
    297 					'autoplay' => 'yes',
    298 				],
    299 				'frontend_available' => true,
    300 			]
    301 		);
    302 
    303 		$this->add_control(
    304 			'autoplay_speed',
    305 			[
    306 				'label' => esc_html__( 'Autoplay Speed', 'elementor' ),
    307 				'type' => Controls_Manager::NUMBER,
    308 				'default' => 5000,
    309 				'condition' => [
    310 					'autoplay' => 'yes',
    311 				],
    312 				'render_type' => 'none',
    313 				'frontend_available' => true,
    314 			]
    315 		);
    316 
    317 		// Loop requires a re-render so no 'render_type = none'
    318 		$this->add_control(
    319 			'infinite',
    320 			[
    321 				'label' => esc_html__( 'Infinite Loop', 'elementor' ),
    322 				'type' => Controls_Manager::SELECT,
    323 				'default' => 'yes',
    324 				'options' => [
    325 					'yes' => esc_html__( 'Yes', 'elementor' ),
    326 					'no' => esc_html__( 'No', 'elementor' ),
    327 				],
    328 				'frontend_available' => true,
    329 			]
    330 		);
    331 
    332 		$this->add_control(
    333 			'effect',
    334 			[
    335 				'label' => esc_html__( 'Effect', 'elementor' ),
    336 				'type' => Controls_Manager::SELECT,
    337 				'default' => 'slide',
    338 				'options' => [
    339 					'slide' => esc_html__( 'Slide', 'elementor' ),
    340 					'fade' => esc_html__( 'Fade', 'elementor' ),
    341 				],
    342 				'condition' => [
    343 					'slides_to_show' => '1',
    344 				],
    345 				'frontend_available' => true,
    346 			]
    347 		);
    348 
    349 		$this->add_control(
    350 			'speed',
    351 			[
    352 				'label' => esc_html__( 'Animation Speed', 'elementor' ),
    353 				'type' => Controls_Manager::NUMBER,
    354 				'default' => 500,
    355 				'render_type' => 'none',
    356 				'frontend_available' => true,
    357 			]
    358 		);
    359 
    360 		$this->add_control(
    361 			'direction',
    362 			[
    363 				'label' => esc_html__( 'Direction', 'elementor' ),
    364 				'type' => Controls_Manager::SELECT,
    365 				'default' => 'ltr',
    366 				'options' => [
    367 					'ltr' => esc_html__( 'Left', 'elementor' ),
    368 					'rtl' => esc_html__( 'Right', 'elementor' ),
    369 				],
    370 			]
    371 		);
    372 
    373 		$this->end_controls_section();
    374 
    375 		$this->start_controls_section(
    376 			'section_style_navigation',
    377 			[
    378 				'label' => esc_html__( 'Navigation', 'elementor' ),
    379 				'tab' => Controls_Manager::TAB_STYLE,
    380 				'condition' => [
    381 					'navigation' => [ 'arrows', 'dots', 'both' ],
    382 				],
    383 			]
    384 		);
    385 
    386 		$this->add_control(
    387 			'heading_style_arrows',
    388 			[
    389 				'label' => esc_html__( 'Arrows', 'elementor' ),
    390 				'type' => Controls_Manager::HEADING,
    391 				'separator' => 'before',
    392 				'condition' => [
    393 					'navigation' => [ 'arrows', 'both' ],
    394 				],
    395 			]
    396 		);
    397 
    398 		$this->add_control(
    399 			'arrows_position',
    400 			[
    401 				'label' => esc_html__( 'Position', 'elementor' ),
    402 				'type' => Controls_Manager::SELECT,
    403 				'default' => 'inside',
    404 				'options' => [
    405 					'inside' => esc_html__( 'Inside', 'elementor' ),
    406 					'outside' => esc_html__( 'Outside', 'elementor' ),
    407 				],
    408 				'prefix_class' => 'elementor-arrows-position-',
    409 				'condition' => [
    410 					'navigation' => [ 'arrows', 'both' ],
    411 				],
    412 			]
    413 		);
    414 
    415 		$this->add_control(
    416 			'arrows_size',
    417 			[
    418 				'label' => esc_html__( 'Size', 'elementor' ),
    419 				'type' => Controls_Manager::SLIDER,
    420 				'range' => [
    421 					'px' => [
    422 						'min' => 20,
    423 						'max' => 60,
    424 					],
    425 				],
    426 				'selectors' => [
    427 					'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
    428 				],
    429 				'condition' => [
    430 					'navigation' => [ 'arrows', 'both' ],
    431 				],
    432 			]
    433 		);
    434 
    435 		$this->add_control(
    436 			'arrows_color',
    437 			[
    438 				'label' => esc_html__( 'Color', 'elementor' ),
    439 				'type' => Controls_Manager::COLOR,
    440 				'selectors' => [
    441 					'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'color: {{VALUE}};',
    442 				],
    443 				'condition' => [
    444 					'navigation' => [ 'arrows', 'both' ],
    445 				],
    446 			]
    447 		);
    448 
    449 		$this->add_control(
    450 			'heading_style_dots',
    451 			[
    452 				'label' => esc_html__( 'Dots', 'elementor' ),
    453 				'type' => Controls_Manager::HEADING,
    454 				'separator' => 'before',
    455 				'condition' => [
    456 					'navigation' => [ 'dots', 'both' ],
    457 				],
    458 			]
    459 		);
    460 
    461 		$this->add_control(
    462 			'dots_position',
    463 			[
    464 				'label' => esc_html__( 'Position', 'elementor' ),
    465 				'type' => Controls_Manager::SELECT,
    466 				'default' => 'outside',
    467 				'options' => [
    468 					'outside' => esc_html__( 'Outside', 'elementor' ),
    469 					'inside' => esc_html__( 'Inside', 'elementor' ),
    470 				],
    471 				'prefix_class' => 'elementor-pagination-position-',
    472 				'condition' => [
    473 					'navigation' => [ 'dots', 'both' ],
    474 				],
    475 			]
    476 		);
    477 
    478 		$this->add_control(
    479 			'dots_size',
    480 			[
    481 				'label' => esc_html__( 'Size', 'elementor' ),
    482 				'type' => Controls_Manager::SLIDER,
    483 				'range' => [
    484 					'px' => [
    485 						'min' => 5,
    486 						'max' => 10,
    487 					],
    488 				],
    489 				'selectors' => [
    490 					'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
    491 				],
    492 				'condition' => [
    493 					'navigation' => [ 'dots', 'both' ],
    494 				],
    495 			]
    496 		);
    497 
    498 		$this->add_control(
    499 			'dots_color',
    500 			[
    501 				'label' => esc_html__( 'Color', 'elementor' ),
    502 				'type' => Controls_Manager::COLOR,
    503 				'selectors' => [
    504 					'{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
    505 				],
    506 				'condition' => [
    507 					'navigation' => [ 'dots', 'both' ],
    508 				],
    509 			]
    510 		);
    511 
    512 		$this->end_controls_section();
    513 
    514 		$this->start_controls_section(
    515 			'section_style_image',
    516 			[
    517 				'label' => esc_html__( 'Image', 'elementor' ),
    518 				'tab' => Controls_Manager::TAB_STYLE,
    519 			]
    520 		);
    521 
    522 		$this->add_responsive_control(
    523 			'gallery_vertical_align',
    524 			[
    525 				'label' => esc_html__( 'Vertical Align', 'elementor' ),
    526 				'type' => Controls_Manager::CHOOSE,
    527 				'options' => [
    528 					'flex-start' => [
    529 						'title' => esc_html__( 'Start', 'elementor' ),
    530 						'icon' => 'eicon-v-align-top',
    531 					],
    532 					'center' => [
    533 						'title' => esc_html__( 'Center', 'elementor' ),
    534 						'icon' => 'eicon-v-align-middle',
    535 					],
    536 					'flex-end' => [
    537 						'title' => esc_html__( 'End', 'elementor' ),
    538 						'icon' => 'eicon-v-align-bottom',
    539 					],
    540 				],
    541 				'condition' => [
    542 					'slides_to_show!' => '1',
    543 				],
    544 				'selectors' => [
    545 					'{{WRAPPER}} .swiper-wrapper' => 'display: flex; align-items: {{VALUE}};',
    546 				],
    547 			]
    548 		);
    549 
    550 		$this->add_control(
    551 			'image_spacing',
    552 			[
    553 				'label' => esc_html__( 'Spacing', 'elementor' ),
    554 				'type' => Controls_Manager::SELECT,
    555 				'options' => [
    556 					'' => esc_html__( 'Default', 'elementor' ),
    557 					'custom' => esc_html__( 'Custom', 'elementor' ),
    558 				],
    559 				'default' => '',
    560 				'condition' => [
    561 					'slides_to_show!' => '1',
    562 				],
    563 			]
    564 		);
    565 
    566 		$this->add_control(
    567 			'image_spacing_custom',
    568 			[
    569 				'label' => esc_html__( 'Image Spacing', 'elementor' ),
    570 				'type' => Controls_Manager::SLIDER,
    571 				'range' => [
    572 					'px' => [
    573 						'max' => 100,
    574 					],
    575 				],
    576 				'default' => [
    577 					'size' => 20,
    578 				],
    579 				'show_label' => false,
    580 				'condition' => [
    581 					'image_spacing' => 'custom',
    582 					'slides_to_show!' => '1',
    583 				],
    584 				'frontend_available' => true,
    585 				'render_type' => 'none',
    586 				'separator' => 'after',
    587 			]
    588 		);
    589 
    590 		$this->add_group_control(
    591 			Group_Control_Border::get_type(),
    592 			[
    593 				'name' => 'image_border',
    594 				'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image',
    595 			]
    596 		);
    597 
    598 		$this->add_control(
    599 			'image_border_radius',
    600 			[
    601 				'label' => esc_html__( 'Border Radius', 'elementor' ),
    602 				'type' => Controls_Manager::DIMENSIONS,
    603 				'size_units' => [ 'px', '%' ],
    604 				'selectors' => [
    605 					'{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    606 				],
    607 			]
    608 		);
    609 
    610 		$this->end_controls_section();
    611 
    612 		$this->start_controls_section(
    613 			'section_caption',
    614 			[
    615 				'label' => esc_html__( 'Caption', 'elementor' ),
    616 				'tab' => Controls_Manager::TAB_STYLE,
    617 				'condition' => [
    618 					'caption_type!' => '',
    619 				],
    620 			]
    621 		);
    622 
    623 		$this->add_control(
    624 			'caption_align',
    625 			[
    626 				'label' => esc_html__( 'Alignment', 'elementor' ),
    627 				'type' => Controls_Manager::CHOOSE,
    628 				'options' => [
    629 					'left' => [
    630 						'title' => esc_html__( 'Left', 'elementor' ),
    631 						'icon' => 'eicon-text-align-left',
    632 					],
    633 					'center' => [
    634 						'title' => esc_html__( 'Center', 'elementor' ),
    635 						'icon' => 'eicon-text-align-center',
    636 					],
    637 					'right' => [
    638 						'title' => esc_html__( 'Right', 'elementor' ),
    639 						'icon' => 'eicon-text-align-right',
    640 					],
    641 					'justify' => [
    642 						'title' => esc_html__( 'Justified', 'elementor' ),
    643 						'icon' => 'eicon-text-align-justify',
    644 					],
    645 				],
    646 				'default' => 'center',
    647 				'selectors' => [
    648 					'{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
    649 				],
    650 			]
    651 		);
    652 
    653 		$this->add_control(
    654 			'caption_text_color',
    655 			[
    656 				'label' => esc_html__( 'Text Color', 'elementor' ),
    657 				'type' => Controls_Manager::COLOR,
    658 				'default' => '',
    659 				'selectors' => [
    660 					'{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
    661 				],
    662 			]
    663 		);
    664 
    665 		$this->add_group_control(
    666 			Group_Control_Typography::get_type(),
    667 			[
    668 				'name' => 'caption_typography',
    669 				'global' => [
    670 					'default' => Global_Colors::COLOR_ACCENT,
    671 				],
    672 				'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
    673 			]
    674 		);
    675 
    676 		$this->add_group_control(
    677 			Group_Control_Text_Shadow::get_type(),
    678 			[
    679 				'name' => 'caption_shadow',
    680 				'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
    681 			]
    682 		);
    683 
    684 		$this->end_controls_section();
    685 
    686 	}
    687 
    688 	/**
    689 	 * Render image carousel widget output on the frontend.
    690 	 *
    691 	 * Written in PHP and used to generate the final HTML.
    692 	 *
    693 	 * @since 1.0.0
    694 	 * @access protected
    695 	 */
    696 	protected function render() {
    697 		$settings = $this->get_settings_for_display();
    698 
    699 		if ( empty( $settings['carousel'] ) ) {
    700 			return;
    701 		}
    702 
    703 		$slides = [];
    704 
    705 		foreach ( $settings['carousel'] as $index => $attachment ) {
    706 			$image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
    707 
    708 			if ( ! $image_url && isset( $attachment['url'] ) ) {
    709 				$image_url = $attachment['url'];
    710 			}
    711 
    712 			$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
    713 
    714 			$link_tag = '';
    715 
    716 			$link = $this->get_link_url( $attachment, $settings );
    717 
    718 			if ( $link ) {
    719 				$link_key = 'link_' . $index;
    720 
    721 				$this->add_lightbox_data_attributes( $link_key, $attachment['id'], $settings['open_lightbox'], $this->get_id() );
    722 
    723 				if ( Plugin::$instance->editor->is_edit_mode() ) {
    724 					$this->add_render_attribute( $link_key, [
    725 						'class' => 'elementor-clickable',
    726 					] );
    727 				}
    728 
    729 				$this->add_link_attributes( $link_key, $link );
    730 
    731 				$link_tag = '<a ' . $this->get_render_attribute_string( $link_key ) . '>';
    732 			}
    733 
    734 			$image_caption = $this->get_image_caption( $attachment );
    735 
    736 			$slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
    737 
    738 			if ( ! empty( $image_caption ) ) {
    739 				$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
    740 			}
    741 
    742 			$slide_html .= '</figure>';
    743 
    744 			if ( $link ) {
    745 				$slide_html .= '</a>';
    746 			}
    747 
    748 			$slide_html .= '</div>';
    749 
    750 			$slides[] = $slide_html;
    751 
    752 		}
    753 
    754 		if ( empty( $slides ) ) {
    755 			return;
    756 		}
    757 
    758 		$this->add_render_attribute( [
    759 			'carousel' => [
    760 				'class' => 'elementor-image-carousel swiper-wrapper',
    761 			],
    762 			'carousel-wrapper' => [
    763 				'class' => 'elementor-image-carousel-wrapper swiper-container',
    764 				'dir' => $settings['direction'],
    765 			],
    766 		] );
    767 
    768 		$show_dots = ( in_array( $settings['navigation'], [ 'dots', 'both' ] ) );
    769 		$show_arrows = ( in_array( $settings['navigation'], [ 'arrows', 'both' ] ) );
    770 
    771 		if ( 'yes' === $settings['image_stretch'] ) {
    772 			$this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
    773 		}
    774 
    775 		$slides_count = count( $settings['carousel'] );
    776 
    777 		?>
    778 		<div <?php $this->print_render_attribute_string( 'carousel-wrapper' ); ?>>
    779 			<div <?php $this->print_render_attribute_string( 'carousel' ); ?>>
    780 				<?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?>
    781 				<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
    782 			</div>
    783 			<?php if ( 1 < $slides_count ) : ?>
    784 				<?php if ( $show_dots ) : ?>
    785 					<div class="swiper-pagination"></div>
    786 				<?php endif; ?>
    787 				<?php if ( $show_arrows ) : ?>
    788 					<div class="elementor-swiper-button elementor-swiper-button-prev">
    789 						<i class="eicon-chevron-left" aria-hidden="true"></i>
    790 						<span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'elementor' ); ?></span>
    791 					</div>
    792 					<div class="elementor-swiper-button elementor-swiper-button-next">
    793 						<i class="eicon-chevron-right" aria-hidden="true"></i>
    794 						<span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'elementor' ); ?></span>
    795 					</div>
    796 				<?php endif; ?>
    797 			<?php endif; ?>
    798 		</div>
    799 		<?php
    800 	}
    801 
    802 	/**
    803 	 * Retrieve image carousel link URL.
    804 	 *
    805 	 * @since 1.0.0
    806 	 * @access private
    807 	 *
    808 	 * @param array $attachment
    809 	 * @param object $instance
    810 	 *
    811 	 * @return array|string|false An array/string containing the attachment URL, or false if no link.
    812 	 */
    813 	private function get_link_url( $attachment, $instance ) {
    814 		if ( 'none' === $instance['link_to'] ) {
    815 			return false;
    816 		}
    817 
    818 		if ( 'custom' === $instance['link_to'] ) {
    819 			if ( empty( $instance['link']['url'] ) ) {
    820 				return false;
    821 			}
    822 
    823 			return $instance['link'];
    824 		}
    825 
    826 		return [
    827 			'url' => wp_get_attachment_url( $attachment['id'] ),
    828 		];
    829 	}
    830 
    831 	/**
    832 	 * Retrieve image carousel caption.
    833 	 *
    834 	 * @since 1.2.0
    835 	 * @access private
    836 	 *
    837 	 * @param array $attachment
    838 	 *
    839 	 * @return string The caption of the image.
    840 	 */
    841 	private function get_image_caption( $attachment ) {
    842 		$caption_type = $this->get_settings_for_display( 'caption_type' );
    843 
    844 		if ( empty( $caption_type ) ) {
    845 			return '';
    846 		}
    847 
    848 		$attachment_post = get_post( $attachment['id'] );
    849 
    850 		if ( 'caption' === $caption_type ) {
    851 			return $attachment_post->post_excerpt;
    852 		}
    853 
    854 		if ( 'title' === $caption_type ) {
    855 			return $attachment_post->post_title;
    856 		}
    857 
    858 		return $attachment_post->post_content;
    859 	}
    860 }