Widget_Image_Carousel::_register_controls()
Register image carousel widget controls.
Description
Adds different input fields to allow the user to change and customize the widget settings.
Changelog
Version | Description |
---|---|
1.0.0 | Introduced. |
Source
includes/widgets/image-carousel.php
); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`. 'separator' => 'none', ] ); $slides_to_show = range( 1, 10 ); $slides_to_show = array_combine( $slides_to_show, $slides_to_show ); $this->add_responsive_control( 'slides_to_show', [ 'label' => __( 'Slides to Show', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => __( 'Default', 'elementor' ), ] + $slides_to_show, 'frontend_available' => true, ] ); $this->add_control( 'slides_to_scroll', [ 'label' => __( 'Slides to Scroll', 'elementor' ), 'type' => Controls_Manager::SELECT, 'description' => __( 'Set how many slides are scrolled per swipe.', 'elementor' ), 'default' => '2', 'options' => $slides_to_show, 'condition' => [ 'slides_to_show!' => '1', ], 'frontend_available' => true, ] ); $this->add_control( 'image_stretch', [ 'label' => __( 'Image Stretch', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'no', 'options' => [ 'no' => __( 'No', 'elementor' ), 'yes' => __( 'Yes', 'elementor' ), ], ] ); $this->add_control( 'navigation', [ 'label' => __( 'Navigation', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'both', 'options' => [ 'both' => __( 'Arrows and Dots', 'elementor' ), 'arrows' => __( 'Arrows', 'elementor' ), 'dots' => __( 'Dots', 'elementor' ), 'none' => __( 'None', 'elementor' ), ], 'frontend_available' => true, ] ); $this->add_control( 'link_to', [ 'label' => __( 'Link to', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => [ 'none' => __( 'None', 'elementor' ), 'file' => __( 'Media File', 'elementor' ), 'custom' => __( 'Custom URL', 'elementor' ), ], ] ); $this->add_control( 'link', [ 'label' => __( 'Link to', 'elementor' ), 'type' => Controls_Manager::URL, 'placeholder' => __( 'https://your-link.com', 'elementor' ), 'condition' => [ 'link_to' => 'custom', ], 'show_label' => false, ] ); $this->add_control( 'open_lightbox', [ 'label' => __( 'Lightbox', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => [ 'default' => __( 'Default', 'elementor' ), 'yes' => __( 'Yes', 'elementor' ), 'no' => __( 'No', 'elementor' ), ], 'condition' => [ 'link_to' => 'file', ], ] ); $this->add_control( 'caption_type', [ 'label' => __( 'Caption', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => __( 'None', 'elementor' ), 'title' => __( 'Title', 'elementor' ), 'caption' => __( 'Caption', 'elementor' ), 'description' => __( 'Description', 'elementor' ), ], ] ); $this->add_control( 'view', [ 'label' => __( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_additional_options', [ 'label' => __( 'Additional Options', 'elementor' ), ] ); $this->add_control( 'pause_on_hover', [ 'label' => __( 'Pause on Hover', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'yes', 'options' => [ 'yes' => __( 'Yes', 'elementor' ), 'no' => __( 'No', 'elementor' ), ], 'frontend_available' => true, ] ); $this->add_control( 'autoplay', [ 'label' => __( 'Autoplay', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'yes', 'options' => [ 'yes' => __( 'Yes', 'elementor' ), 'no' => __( 'No', 'elementor' ), ], 'frontend_available' => true, ] ); $this->add_control( 'autoplay_speed', [ 'label' => __( 'Autoplay Speed', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 5000, 'frontend_available' => true, ] ); $this->add_control( 'infinite', [ 'label' => __( 'Infinite Loop', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'yes', 'options' => [ 'yes' => __( 'Yes', 'elementor' ), 'no' => __( 'No', 'elementor' ), ], 'frontend_available' => true, ] ); $this->add_control( 'effect', [ 'label' => __( 'Effect', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'slide', 'options' => [ 'slide' => __( 'Slide', 'elementor' ), 'fade' => __( 'Fade', 'elementor' ), ], 'condition' => [ 'slides_to_show' => '1', ], 'frontend_available' => true, ] ); $this->add_control( 'speed', [ 'label' => __( 'Animation Speed', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 500, 'frontend_available' => true, ] ); $this->add_control( 'direction', [ 'label' => __( 'Direction', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'ltr', 'options' => [ 'ltr' => __( 'Left', 'elementor' ), 'rtl' => __( 'Right', 'elementor' ), ], 'frontend_available' => true, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_navigation', [ 'label' => __( 'Navigation', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'navigation' => [ 'arrows', 'dots', 'both' ], ], ] ); $this->add_control( 'heading_style_arrows', [ 'label' => __( 'Arrows', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'navigation' => [ 'arrows', 'both' ], ], ] ); $this->add_control( 'arrows_position', [ 'label' => __( 'Arrows Position', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'inside', 'options' => [ 'inside' => __( 'Inside', 'elementor' ), 'outside' => __( 'Outside', 'elementor' ), ], 'condition' => [ 'navigation' => [ 'arrows', 'both' ], ], ] ); $this->add_control( 'arrows_size', [ 'label' => __( 'Arrows Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 20, 'max' => 60, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-prev:before, {{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-next:before' => 'font-size: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'navigation' => [ 'arrows', 'both' ], ], ] ); $this->add_control( 'arrows_color', [ 'label' => __( 'Arrows Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-prev:before, {{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-next:before' => 'color: {{VALUE}};', ], 'condition' => [ 'navigation' => [ 'arrows', 'both' ], ], ] ); $this->add_control( 'heading_style_dots', [ 'label' => __( 'Dots', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'navigation' => [ 'dots', 'both' ], ], ] ); $this->add_control( 'dots_position', [ 'label' => __( 'Dots Position', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'outside', 'options' => [ 'outside' => __( 'Outside', 'elementor' ), 'inside' => __( 'Inside', 'elementor' ), ], 'condition' => [ 'navigation' => [ 'dots', 'both' ], ], ] ); $this->add_control( 'dots_size', [ 'label' => __( 'Dots Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 5, 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-dots li button:before' => 'font-size: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'navigation' => [ 'dots', 'both' ], ], ] ); $this->add_control( 'dots_color', [ 'label' => __( 'Dots Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-dots li button:before' => 'color: {{VALUE}};', ], 'condition' => [ 'navigation' => [ 'dots', 'both' ], ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_image', [ 'label' => __( 'Image', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'image_spacing', [ 'label' => __( 'Spacing', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => __( 'Default', 'elementor' ), 'custom' => __( 'Custom', 'elementor' ), ], 'default' => '', 'condition' => [ 'slides_to_show!' => '1', ], ] ); $this->add_control( 'image_spacing_custom', [ 'label' => __( 'Image Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 20, ], 'show_label' => false, 'selectors' => [ '{{WRAPPER}} .slick-list' => 'margin-left: -{{SIZE}}{{UNIT}};', '{{WRAPPER}} .slick-slide .slick-slide-inner' => 'padding-left: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'image_spacing' => 'custom', 'slides_to_show!' => '1', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'image_border', 'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-slide-image', 'separator' => 'before', ] ); $this->add_control( 'image_border_radius', [ 'label' => __( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_caption', [ 'label' => __( 'Caption', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'caption_type!' => '', ], ] ); $this->add_control( 'caption_align', [ 'label' => __( 'Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'elementor' ), 'icon' => 'fa fa-align-left', ], 'center' => [ 'title' => __( 'Center', 'elementor' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', ], 'justify' => [ 'title' => __( 'Justified', 'elementor' ), 'icon' => 'fa fa-align-justify', ], ], 'default' => 'center', 'selectors' => [ '{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( 'caption_text_color', [ 'label' => __( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'caption_typography', 'scheme' => Scheme_Typography::TYPOGRAPHY_4, 'selector' => '{{WRAPPER}} .elementor-image-carousel-caption', ] ); $this->end_controls_section(); } /** * Render image carousel widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ protected function render() { $settings = $this->get_settings_for_display(); if ( empty( $settings['carousel'] ) ) { return;
Uses
- includes/controls/groups/typography.php: Group_Control_Typography::get_type()
- includes/controls/groups/image-size.php: Group_Control_Image_Size::get_type()
- includes/controls/groups/border.php: Group_Control_Border::get_type()