print_render_attribute_string( $element_key . '-image' ); ?>>
'eicons',
'value' => 'eicon-play',
], [ 'aria-hidden' => 'true' ] );
?>
print_render_attribute_string( 'image-overlay' ); ?>>
get_image_caption( $slide ) );
} else {
$this->render_overlay_icon( $settings['icon'] );
}
?>
start_injection( [
'type' => 'section',
'at' => 'start',
'of' => 'section_slides',
] );
$this->add_control(
'skin',
[
'label' => esc_html__( 'Skin', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'carousel',
'options' => [
'carousel' => esc_html__( 'Carousel', 'elementor-pro' ),
'slideshow' => esc_html__( 'Slideshow', 'elementor-pro' ),
'coverflow' => esc_html__( 'Coverflow', 'elementor-pro' ),
],
'prefix_class' => 'elementor-skin-',
'render_type' => 'template',
'frontend_available' => true,
]
);
$this->end_injection();
$this->start_injection( [
'of' => 'image_size_custom_dimension',
] );
$this->add_control(
'image_fit',
[
'label' => esc_html__( 'Image Fit', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => '',
'options' => [
'' => esc_html__( 'Cover', 'elementor-pro' ),
'contain' => esc_html__( 'Contain', 'elementor-pro' ),
'auto' => esc_html__( 'Auto', 'elementor-pro' ),
],
'selectors' => [
'{{WRAPPER}} .elementor-main-swiper .elementor-carousel-image' => 'background-size: {{VALUE}}',
],
]
);
$this->end_injection();
$this->start_injection( [
'of' => 'pagination_color',
] );
$this->add_control(
'play_icon_title',
[
'label' => esc_html__( 'Play Icon', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'play_icon_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-custom-embed-play i' => 'color: {{VALUE}}',
'{{WRAPPER}} .elementor-custom-embed-play svg' => 'fill: {{VALUE}}',
],
]
);
$this->add_responsive_control(
'play_icon_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => 20,
'max' => 150,
],
'em' => [
'min' => 2,
'max' => 15,
],
'rem' => [
'min' => 2,
'max' => 15,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-custom-embed-play i' => 'font-size: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_group_control(
Group_Control_Text_Shadow::get_type(),
[
'name' => 'play_icon_text_shadow',
'selector' => '{{WRAPPER}} .elementor-custom-embed-play i',
'fields_options' => [
'text_shadow_type' => [
'label' => _x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ),
],
],
]
);
$this->end_injection();
$this->start_injection( [
'of' => 'pause_on_interaction',
] );
$this->add_control(
'overlay',
[
'label' => esc_html__( 'Overlay', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => '',
'options' => [
'' => esc_html__( 'None', 'elementor-pro' ),
'text' => esc_html__( 'Text', 'elementor-pro' ),
'icon' => esc_html__( 'Icon', 'elementor-pro' ),
],
'condition' => [
'skin!' => 'slideshow',
],
'separator' => 'before',
]
);
$this->add_control(
'caption',
[
'label' => esc_html__( 'Caption', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'title',
'options' => [
'title' => esc_html__( 'Title', 'elementor-pro' ),
'caption' => esc_html__( 'Caption', 'elementor-pro' ),
'description' => esc_html__( 'Description', 'elementor-pro' ),
],
'condition' => [
'skin!' => 'slideshow',
'overlay' => 'text',
],
]
);
$this->add_control(
'icon',
[
'label' => esc_html__( 'Icon', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'search-plus',
'options' => [
'search-plus' => [
'icon' => 'eicon-search-bold',
],
'plus-circle' => [
'icon' => 'eicon-plus-circle',
],
'eye' => [
'icon' => 'eicon-preview-medium',
],
'link' => [
'icon' => 'eicon-link',
],
],
'condition' => [
'skin!' => 'slideshow',
'overlay' => 'icon',
],
]
);
$this->add_control(
'overlay_animation',
[
'label' => esc_html__( 'Animation', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'fade',
'options' => [
'fade' => 'Fade',
'slide-up' => 'Slide Up',
'slide-down' => 'Slide Down',
'slide-right' => 'Slide Right',
'slide-left' => 'Slide Left',
'zoom-in' => 'Zoom In',
],
'condition' => [
'skin!' => 'slideshow',
'overlay!' => '',
],
]
);
$this->end_injection();
$this->start_injection( [
'type' => 'section',
'of' => 'section_navigation',
] );
$this->start_controls_section(
'section_overlay',
[
'label' => esc_html__( 'Overlay', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'skin!' => 'slideshow',
'overlay!' => '',
],
]
);
$this->add_control(
'overlay_background_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-carousel-image-overlay' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'overlay_color',
[
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-carousel-image-overlay' => '--e-carousel-image-overlay-color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'caption_typography',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
],
'selector' => '{{WRAPPER}} .elementor-carousel-image-overlay',
'condition' => [
'overlay' => 'text',
],
]
);
$this->add_control(
'icon_size',
[
'label' => esc_html__( 'Icon Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'selectors' => [
'{{WRAPPER}} .elementor-carousel-image-overlay' => '--e-carousel-image-overlay-icon-size: {{SIZE}}{{UNIT}};',
],
'condition' => [
'overlay' => 'icon',
],
]
);
$this->end_controls_section();
$this->end_injection();
// Slideshow
$this->start_injection( [
'of' => 'effect',
] );
$this->add_responsive_control(
'slideshow_height',
[
'type' => Controls_Manager::SLIDER,
'label' => esc_html__( 'Height', 'elementor-pro' ),
'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
'range' => [
'px' => [
'min' => 20,
'max' => 1000,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-main-swiper' => 'height: {{SIZE}}{{UNIT}};',
],
'condition' => [
'skin' => 'slideshow',
],
]
);
$this->add_control(
'thumbs_title',
[
'label' => esc_html__( 'Thumbnails', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'condition' => [
'skin' => 'slideshow',
],
]
);
$this->end_injection();
$this->start_injection( [
'of' => 'slides_per_view',
] );
$this->add_control(
'thumbs_ratio',
[
'label' => esc_html__( 'Ratio', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'169' => '16:9',
'219' => '21:9',
'43' => '4:3',
'11' => '1:1',
],
'selectors_dictionary' => [
'169' => '16 / 9',
'219' => '21 / 9',
'43' => '4 / 3',
'11' => '1 / 1',
],
'default' => '219',
'condition' => [
'skin' => 'slideshow',
],
'selectors' => [
'{{WRAPPER}} .elementor-thumbnails-swiper .elementor-carousel-image' => 'aspect-ratio: {{VALUE}}',
],
]
);
$this->add_control(
'centered_slides',
[
'label' => esc_html__( 'Centered Slides', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'condition' => [
'skin' => 'slideshow',
],
'frontend_available' => true,
]
);
$this->end_injection();
$this->start_injection( [
'of' => 'slides_per_view',
] );
$slides_per_view = range( 1, 10 );
$slides_per_view = array_combine( $slides_per_view, $slides_per_view );
$this->add_responsive_control(
'slideshow_slides_per_view',
[
'type' => Controls_Manager::SELECT,
'label' => esc_html__( 'Slides Per View', 'elementor-pro' ),
'options' => [ '' => esc_html__( 'Default', 'elementor-pro' ) ] + $slides_per_view,
'condition' => [
'skin' => 'slideshow',
],
'frontend_available' => true,
]
);
$this->end_injection();
}
private function update_controls() {
$carousel_controls = [
'slides_to_scroll',
'pagination',
'heading_pagination',
'pagination_size',
'pagination_position',
'pagination_color',
];
$carousel_responsive_controls = [
'width',
'height',
'slides_per_view',
];
foreach ( $carousel_controls as $control_id ) {
$this->update_control(
$control_id,
[
'condition' => [
'skin!' => 'slideshow',
],
],
[ 'recursive' => true ]
);
}
foreach ( $carousel_responsive_controls as $control_id ) {
$this->update_responsive_control(
$control_id,
[
'condition' => [
'skin!' => 'slideshow',
],
],
[ 'recursive' => true ]
);
}
$this->update_responsive_control(
'space_between',
[
'selectors' => [
'{{WRAPPER}}.elementor-skin-slideshow .elementor-main-swiper' => 'margin-bottom: {{SIZE}}{{UNIT}}',
],
'render_type' => 'ui',
]
);
$this->update_control(
'effect',
[
'condition' => [
'skin!' => 'coverflow',
],
]
);
}
public function get_group_name() {
return 'carousel';
}
private function render_overlay_icon( $icon_name ) {
$icon_value = 'fas fa-' . $icon_name;
$icon = [
'library' => 'fa-solid',
'value' => $icon_value,
];
Icons_Manager::render_icon( $icon );
}
}