# uicore-elements/1.3.17/includes/utils/carousel-component.php

UiCore Elements – Free widgets and templates for Elementor, version 1.3.17. 1,991 lines.

- Page: https://pluginprobe.com/plugins/uicore-elements/1.3.17/code/includes/utils/carousel-component.php
- Raw: https://pluginprobe.com/plugins/uicore-elements/1.3.17/raw/includes/utils/carousel-component.php
- Modified: 2026-09-15T12:03:04+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/uicore-elements/1.3.17/code/includes/utils/carousel-component.php#L10-L20`.

```php
<?php

namespace UiCoreElements\Utils;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Icons_Manager;
use Elementor\Plugin;

if (! defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

/*
* Carousel / Slider Component Trait
*/

trait Carousel_Trait
{

    /**
     * Sets all navigation conditions in one place
     *
     * @param string $type Control name
     * @param array|null $extras (Optional) Terms attributes. ['name' => 'control, 'operator' => '==', 'value' => 'yes'], [..]
     * @param string|null $relation (Optional) Accepts 'or' & 'and' values. Default is 'and'
     * @return array Elementor API Conditions
     */
    function nav_conditions($type, $extras = false, $relation = 'and')
    {
        if ($type == 'arrows') {
            $options = ['arrows', 'arrows-dots', 'arrows-fraction'];
        } elseif ($type == 'dots') {
            $options = ['dots', 'arrows-dots'];
        } elseif ($type == 'fraction') {
            $options = ['fraction', 'arrows-fraction'];
        }

        $conditions['terms'][] = [
            'name' => 'navigation',
            'operator' => 'in',
            'value' => $options,
        ];

        // Marquee animation style does not support navigation
        $conditions['terms'][] = [
            'name' => 'animation_style',
            'operator' => '!=',
            'value' => 'marquee',
        ];

        $conditions['relation'] = $relation;

        // Check for extra conditions
        if ($extras != false) {
            foreach ($extras as $extra) {
                $conditions['terms'][] = $extra;
            }
        }

        return $conditions;
    }

    /**
     * Returns the Carousel/Slider widget scripts.
     *
     * @param bool $use_entrance If the entrance script should be enqueued or not. Default is `true`.
     * @param array $extra_conditions Extra conditions to be added to the scripts.
     *
     * @return array The array of scripts for the widget.
     */
    function TRAIT_get_carousel_scripts($use_entrance = true, $extra_conditions = null)
    {

        $base = ['carousel'];

        // Add extra conditions to carousel script if requested
        if (isset($extra_conditions)) {
            $base['carousel'] = ['condition' => []];

            foreach ($extra_conditions as $key => $value) {
                $base['carousel']['condition'][$key] = $value;
            }
        }

        if ($use_entrance) {
            $base['entrance'] = [
                'condition' => [
                    'animate_items' => 'ui-e-grid-animate'
                ],
            ];
        }

        // Specific Slider scripts
        if (strpos($this->get_name(), 'slide') !== false) {
            $type = [
                'stacked-carousel' => [
                    'condition' => [
                        'animation_style' => 'stacked',
                    ]
                ],
                // TODO: move out and pass as extra
                'circular-avatar-carousel' => [
                    'condition' => [
                        'animation_style' => 'circular_avatar',
                    ]
                ]
            ];

            // Specific Carousel scripts - if is not slider, is Carousel :)
        } else {
            $type = [
                'special-effects' => [
                    'condition' => [
                        'animation_style' => ['fade_blur', 'circular']
                    ]
                ]
            ];
        }

        // Merge and return the scripts
        return array_merge($base, $type);
    }

    // Navigation Controls
    function TRAIT_register_navigation_controls()
    {

        $this->start_controls_section(
            'section_content_navigation',
            [
                'label' => __('Navigation', 'uicore-elements'),
            ]
        );

        $this->add_control(
            'navigation',
            [
                'label'        => __('Navigation', 'uicore-elements'),
                'type'         => Controls_Manager::SELECT,
                'default'      => 'arrows-dots',
                'options'      => [
                    'arrows'    => esc_html__('Arrows', 'uicore-elements'),
                    'dots'      => esc_html__('Dots', 'uicore-elements'),
                    'fraction'  => esc_html__('Fractions', 'uicore-elements'),
                    'arrows-dots'    => esc_html__('Arrows and Dots', 'uicore-elements'),
                    'arrows-fraction'    => esc_html__('Arrows and Fraction', 'uicore-elements'),
                    'none'        => esc_html__('None', 'uicore-elements'),
                ],
                'label_block' => true,
                'render_type'  => 'template',
                'frontend_available' => true,
                'condition' => [
                    'animation_style!' => 'marquee',
                ],
            ]
        );
        $this->add_control(
            'marquee_warning',
            [
                'type' => Controls_Manager::RAW_HTML,
                'raw' => esc_html__('Marquee animation does not support navigation.', 'uicore-elements'),
                'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
                'condition' => [
                    'animation_style' => 'marquee',
                ],
            ]
        );
        $this->add_control(
            'hr_arrows',
            [
                'label' => esc_html__('Arrows', 'uicore-elements'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'conditions' =>  $this->nav_conditions('arrows'),
            ]
        );
        $this->start_controls_tabs(
            'arrows_tabs'
        );

        $this->start_controls_tab(
            'previous_tab',
            [
                'label' => esc_html__('Previous', 'uicore-elements'),
                'conditions' =>  $this->nav_conditions('arrows'),
            ]
        );

        $this->add_control(
            'previous_arrow',
            [
                'label' => esc_html__('Previous Arrow Icon', 'uicore-elements'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-arrow-left',
                    'library' => 'fa-solid',
                ],
                'recommended' => [
                    'fa-solid' => [
                        'arrow-alt-circle-left',
                        'caret-square-left',
                        'angle-double-left',
                        'angle-left',
                        'arrow-alt-circle-left',
                        'arrow-left',
                        'caret-left',
                        'caret-square-left',
                        'chevron-circle-left',
                        'chevron-left',
                        'long-arrow-alt-left'
                    ]
                ],
                'label_block' => false,
                'skin' => 'inline',
                'conditions' =>  $this->nav_conditions('arrows'),
            ]
        );
        $this->add_responsive_control(
            'previous_arrow_h_position',
            [
                'label'   => __('Horizontal Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'left: 0; right: auto;' => [
                        'title' => __('Left', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'left: 0; right: 0; margin: auto;' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-center',
                    ],
                    'left: auto; right: 0;' => [
                        'title' => __('Right', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'default' => 'left: 0; right: auto;',
                'selectors' => [
                    '{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_responsive_control(
            'previous_arrow_v_position',
            [
                'label'   => __('Vertical Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'top: 0; bottom: auto;' => [
                        'title' => __('Top', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-top',
                    ],
                    'top: 0; bottom: 0; margin: auto;' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-middle',
                    ],
                    'top: auto; bottom: 0' => [
                        'title' => __('Bottom', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-bottom',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
                ],
                'default' => 'top: 0; bottom: 0; margin: auto;',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_control(
            'previous_advanced_position',
            [
                'label' => esc_html__('Arrow Offset', 'uicore-elements'),
                'type' => Controls_Manager::POPOVER_TOGGLE,
                'label_off' => esc_html__('Default', 'uicore-elements'),
                'label_on' => esc_html__('Custom', 'uicore-elements'),
                'return_value' => 'yes',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->start_popover();

        $this->add_responsive_control(
            'prev_arrow_h_offset',
            [
                'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -200,
                        'max' => 200,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-prev-arrow-h-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'previous_advanced_position' => 'yes'
                ]
            ]
        );
        $this->add_responsive_control(
            'prev_arrow_v_offset',
            [
                'label' => esc_html__('Vertical Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -200,
                        'max' => 200,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-prev-arrow-v-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'previous_advanced_position' => 'yes'
                ]
            ]
        );
        $this->add_responsive_control(
            'prev_arrow_rotate',
            [
                'label' => esc_html__('Rotation', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 360,
                        'step' => 5,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-previous > *' => 'rotate:{{SIZE}}deg;',
                ],
                'condition' => [
                    'previous_advanced_position' => 'yes'
                ]
            ]
        );

        $this->end_popover();

        $this->end_controls_tab();

        $this->start_controls_tab(
            'next_tab',
            [
                'label' => esc_html__('Next', 'uicore-elements'),
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );

        $this->add_control(
            'next_arrow',
            [
                'label' => esc_html__('Previous Arrow Icon', 'uicore-elements'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-arrow-right',
                    'library' => 'fa-solid',
                ],
                'recommended' => [
                    'fa-solid' => [
                        'arrow-alt-circle-right',
                        'caret-square-right',
                        'angle-double-right',
                        'angle-right',
                        'arrow-alt-circle-right',
                        'arrow-right',
                        'caret-right',
                        'caret-square-right',
                        'chevron-circle-right',
                        'chevron-right',
                        'long-arrow-alt-right'
                    ]
                ],
                'label_block' => false,
                'skin' => 'inline',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_responsive_control(
            'next_arrow_h_position',
            [
                'label'   => __('Horizontal Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'left: 0; right: auto;' => [
                        'title' => __('Left', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'left: 0; right: 0; margin: auto;' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-center',
                    ],
                    'left: auto; right: 0;' => [
                        'title' => __('Right', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'default' => 'left: auto; right: 0;',
                'selectors' => [
                    '{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_responsive_control(
            'next_arrow_v_position',
            [
                'label'   => __('Vertical Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'top: 0; bottom: auto;' => [
                        'title' => __('Top', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-top',
                    ],
                    'top: 0; bottom: 0; margin: auto;' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-middle',
                    ],
                    'top: auto; bottom: 0' => [
                        'title' => __('Bottom', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-bottom',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
                ],
                'default' => 'top: 0; bottom: 0; margin: auto;',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_control(
            'next_advanced_position',
            [
                'label' => esc_html__('Arrow Offset', 'uicore-elements'),
                'type' => Controls_Manager::POPOVER_TOGGLE,
                'label_off' => esc_html__('Default', 'uicore-elements'),
                'label_on' => esc_html__('Custom', 'uicore-elements'),
                'return_value' => 'yes',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->start_popover();
        $this->add_responsive_control(
            'next_arrow_h_offset',
            [
                'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -200,
                        'max' => 200,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-next-arrow-h-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'next_advanced_position' => 'yes'
                ]
            ]
        );
        $this->add_responsive_control(
            'next_arrow_v_offset',
            [
                'label' => esc_html__('Vertical Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -200,
                        'max' => 200,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-next-arrow-v-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'next_advanced_position' => 'yes'
                ]
            ]
        );
        $this->add_responsive_control(
            'next_arrow_rotate',
            [
                'label' => esc_html__('Rotation', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 360,
                        'step' => 5,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-next > *' => 'rotate:{{SIZE}}deg;',
                ],
                'condition' => [
                    'previous_advanced_position' => 'yes'
                ]
            ]
        );

        $this->end_popover();

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_control(
            'arrows_mobile',
            [
                'label' => esc_html__('Hide arrows on Mobile', 'uicore-elements'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'selectors' => [
                    '(mobile){{WRAPPER}} .ui-e-button' => 'display: none',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );

        $this->add_control(
            'hr_fraction',
            [
                'label' => esc_html__('Fraction', 'uicore-elements'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_responsive_control(
            'fraction_h_position',
            [
                'label'   => __('Horizontal Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'left: 0; right: auto;' => [
                        'title' => __('Left', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'left: 0; right: 0; margin: auto;' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-center',
                    ],
                    'left: auto; right: 0;' => [
                        'title' => __('Right', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'default' => 'left: 0; right: auto;',
                'selectors' => [
                    '{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
                ],
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_responsive_control(
            'fraction_v_position',
            [
                'label'   => __('Vertical Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'top: -25px; bottom: auto;' => [
                        'title' => __('Top', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-top',
                    ],
                    'top: 0; bottom: 0; margin: auto;' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-middle',
                    ],
                    'top: auto; bottom: -25px;' => [
                        'title' => __('Bottom', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-bottom',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
                ],
                'default' => 'bottom: -25px;',
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_control(
            'fraction_offset_toggle',
            [
                'label' => esc_html__('Fraction Offset', 'uicore-elements'),
                'type' => Controls_Manager::POPOVER_TOGGLE,
                'label_off' => esc_html__('Default', 'uicore-elements'),
                'label_on' => esc_html__('Custom', 'uicore-elements'),
                'return_value' => 'yes',
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->start_popover();
        $this->add_responsive_control(
            'fraction_h_offset',
            [
                'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -80,
                        'max' => 80,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-fraction-h-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'fraction_offset_toggle' => 'yes'
                ]
            ]
        );
        $this->add_responsive_control(
            'fraction_v_offset',
            [
                'label' => esc_html__('Vertical Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -80,
                        'max' => 80,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-fraction-v-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'fraction_offset_toggle' => 'yes'
                ]
            ]
        );

        $this->end_popover();

        $this->add_control(
            'hr_dots',
            [
                'label' => esc_html__('Dots', 'uicore-elements'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_responsive_control(
            'dots_h_position',
            [
                'label'   => __('Horizontal Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'left: 0; right: auto;' => [
                        'title' => __('Left', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'left: 0; right: 0; margin: auto;' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-center',
                    ],
                    'left: auto; right: 0;' => [
                        'title' => __('Right', 'uicore-elements'),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'default' => 'left: 0; right: 0; margin: auto;',
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots' => '{{VALUE}};'
                ],
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_responsive_control(
            'dots_v_position',
            [
                'label'   => __('Vertical Orientation', 'uicore-elements'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'top: 0px; bottom: auto;' => [
                        'title' => __('Top', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-top',
                    ],
                    'top: 0; bottom: 0; margin: auto' => [
                        'title' => __('Center', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-middle',
                    ],
                    'top: auto; bottom: 0px;' => [
                        'title' => __('Bottom', 'uicore-elements'),
                        'icon'  => 'eicon-v-align-bottom',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots' => '{{VALUE}}'
                ],
                'default' => 'top: auto; bottom: 0px;',
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_control(
            'dots_advanced',
            [
                'label' => esc_html__('Dots Offset', 'uicore-elements'),
                'type' => Controls_Manager::POPOVER_TOGGLE,
                'label_off' => esc_html__('Default', 'uicore-elements'),
                'label_on' => esc_html__('Custom', 'uicore-elements'),
                'return_value' => 'yes',
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->start_popover();
        $this->add_responsive_control(
            'dots_h_offset',
            [
                'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -100,
                        'max' => 100,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-dots-h-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'dots_advanced' => 'yes'
                ]
            ]
        );
        $this->add_responsive_control(
            'dots_v_offset',
            [
                'label' => esc_html__('Vertical Offset', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%',],
                'range' => [
                    'px' => [
                        'min' => -100,
                        'max' => 100,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-dots-v-off:{{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'dots_advanced' => 'yes'
                ]
            ]
        );
        $this->add_responsive_control(
            'dots_rotate',
            [
                'label' => esc_html__('Rotation', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 360,
                        'step' => 5,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots' => 'rotate: {{SIZE}}deg;',
                ],
                'condition' => [
                    'dots_advanced' => 'yes'
                ]
            ]
        );
        $this->end_popover();

        $this->end_controls_section();
    }
    function TRAIT_register_carousel_settings_controls()
    {
        $this->add_control(
            'animation_style',
            [
                'label'        => __('Animation', 'uicore-elements'),
                'type'         => Controls_Manager::SELECT,
                'default'      => 'circular',
                'options'      => [
                    'circular'       => esc_html__('Circular', 'uicore-elements'),
                    'fade_blur'   => esc_html__('Fade Blur', 'uicore-elements'),
                    'marquee'     => esc_html__('Marquee', 'uicore-elements'),
                    'default'     => esc_html__('Default', 'uicore-elements'),
                ],
                'prefix_class' => 'ui-e-animation-',
                'render_type'  => 'template',
                'frontend_available' => true,
            ]
        );
        $this->add_responsive_control(
            'slides_per_view',
            [
                'label'           => __('Slides per View', 'uicore-elements'),
                'type'            => Controls_Manager::SELECT,
                'desktop_default' => 3,
                'tablet_default'  => 2,
                'mobile_default'  => 1,
                'options'         => [
                    1 => '1',
                    2 => '2',
                    3 => '3',
                    4 => '4',
                    5 => '5',
                    6 => '6',
                    7 => '7',
                    8 => '8',
                ],
                'render_type' => 'template',
                'frontend_available' => true,
                'content_classes' => 'elementor-control-field-select-small',
                'conditions' => [
                    'relation' => 'or',
                    'terms' => [
                        [
                            'name' => 'animation_style',
                            'operator' => '!==',
                            'value' => 'marquee',
                        ],
                        [
                            'relation' => 'and',
                            'terms' => [
                                [
                                    'name' => 'animation_style',
                                    'operator' => '===',
                                    'value' => 'marquee',
                                ],
                                [
                                    'name' => 'vertical',
                                    'operator' => '!==',
                                    'value' => 'true',
                                ]
                            ],
                        ],
                    ]
                ]
            ]
        );
        $this->add_control(
            'show_hidden',
            [
                'label' => esc_html__('Show Hidden Items', 'uicore-elements'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'hidden',
                'options' => [
                    'hidden'  => esc_html__('Hidden', 'uicore-elements'),
                    'left'    => esc_html__('Show Left', 'uicore-elements'),
                    'right'   => esc_html__('Show Right', 'uicore-elements'),
                ],
                'content_classes' => 'elementor-control-field-select-small',
                'condition' => [
                    'animation_style' => ['fade_blur', 'circular']
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'marquee_speed',
            [
                'label'     => esc_html__('Marquee Speed', 'uicore-elements'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => 5000,
                'min' => 100,
                'max' => 10000,
                'step' => 100,
                'condition' => [
                    'animation_style' => 'marquee',
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'center_slides',
            [
                'label' => esc_html__('Center Slides', 'uicore-elements'),
                'type'  => Controls_Manager::SWITCHER,
                'return_value' => 'true',
                'condition' => [
                    'animation_style!' => 'marquee',
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'vertical',
            [
                'label'        => __('Vertical Scroll', 'uicore-elements'),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'true',
                'render_type'  => 'template',
                'condition' => [
                    'animation_style' => 'marquee',
                ],
                'prefix_class' => 'ui-e-vertical-',
                'frontend_available' => true,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-carousel' => '--ui-e-fade-edge-direction: bottom;',
                ],
            ]
        );
        $this->add_control(
            'vertical_slide_height',
            [
                'label' => esc_html__('Carousel Height', 'uicore-elements'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh', 'custom'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 1000,
                        'step' => 5,
                    ],
                    'vh' => [
                        'min' => 1,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 350,
                ],
                'condition' => [
                    'animation_style' => 'marquee',
                    'vertical' => 'true',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-carousel' => 'height: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );
        $this->add_control(
            'fade_edges',
            [
                'label'   => __('Fade Edges', 'uicore-elements'),
                'type'    => Controls_Manager::SWITCHER,
                'prefix_class' => 'ui-e-fade-edges-',
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-fade-edge-direction: right;',
                ],
            ]
        );
        $this->add_control(
            'fade_edge_opacity',
            [
                'label' => esc_html__('Fade opacity', 'uicore-elements'),
                'type' => Controls_Manager::NUMBER,
                'default' => 0.35,
                'min' => 0,
                'max' => 1,
                'step' => 0.05,
                'condition' => [
                    'fade_edges' => 'yes',
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-fade-edge-alpha: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'fade_edge_deep',
            [
                'label' => esc_html__('Fade deepening', 'uicore-elements'),
                'type' => Controls_Manager::NUMBER,
                'default' => 30,
                'min' => 0,
                'max' => 50,
                'step' => 5,
                'condition' => [
                    'fade_edges' => 'yes',
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-fade-edge-deep: {{VALUE}}%;',
                ],
            ]
        );
        $this->add_control(
            'autoplay',
            [
                'label'   => __('Autoplay', 'uicore-elements'),
                'type'    => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'condition' => [
                    'animation_style!' => 'marquee',
                ],
                'frontend_available' => true,
            ]
        );

        $this->add_control(
            'autoplay_speed',
            [
                'label'     => esc_html__('Autoplay Speed', 'uicore-elements'),
                'type'      => Controls_Manager::NUMBER,
                'default'   => 5000,
                'min' => 100,
                'max' => 10000,
                'step' => 100,
                'condition' => [
                    'autoplay' => 'yes',
                    'animation_style!' => 'marquee',
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'reverse',
            [
                'label'        => __('Reverse Direction', 'uicore-elements'),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'true',
                'render_type'  => 'template',
                'conditions' => [
                    'relation' => 'or',
                    'terms' => [
                        [
                            'name' => 'animation_style',
                            'operator' => '===',
                            'value' => 'marquee',
                        ],
                        [
                            'name' => 'autoplay',
                            'operator' => '===',
                            'value' => 'yes',
                        ],
                    ],
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'pause_on_hover',
            [
                'label' => esc_html__('Pause on Hover', 'uicore-elements'),
                'type'  => Controls_Manager::SWITCHER,
                'return_value' => 'true',
                'separator' => 'after',
                'condition' => [
                    'autoplay' => 'yes',
                    'animation_style!' => 'marquee',
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'grab_cursor',
            [
                'label' => __('Grab Cursor', 'uicore-elements'),
                'type'  => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'condition' => [
                    'animation_style!' => 'marquee',
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'loop',
            [
                'label'   => __('Loop', 'uicore-elements'),
                'type'    => Controls_Manager::SWITCHER,
                'default' => 'true',
                'return_value' => 'true',
                'condition' => [
                    'animation_style!' => 'marquee',
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'overflow_container',
            [
                'label' => esc_html__('Overflow Container', 'uicore-elements'),
                'type' => \Elementor\Controls_Manager::HIDDEN,
                'default' => Plugin::$instance->experiments->is_feature_active('container') ? 'container' : 'column',
                'frontend_available' => true, // return on the JS the container type (flexbox or column) for overflow
            ]
        );
        $this->add_control(
            'observer',
            [
                'label'       => __('Observer', 'uicore-elements'),
                'description' => __('Use it when the carousel is placed in a hidden place (ex: tab, accordion).', 'uicore-elements'),
                'type'        => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'frontend_available' => true,
            ]
        );
    }
    //Navigation Style Controls
    function TRAIT_register_navigation_style_controls()
    {

        $this->start_controls_section(
            'section_style_navigation',
            [
                'label'     => esc_html__('Navigation', 'uicore-elements'),
                'tab'       => Controls_Manager::TAB_STYLE,
                'conditions' => [
                    'terms' => [
                        [
                            'name' => 'navigation',
                            'operator' => '!=',
                            'value' => '',
                        ],
                    ],
                ],
            ]
        );

        $this->add_control(
            'arrows_heading',
            [
                'label'     => __('Arrows', 'uicore-elements'),
                'type'      => Controls_Manager::HEADING,
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );

        $this->start_controls_tabs('tabs_navigation_arrows_style');

        $this->start_controls_tab(
            'tabs_nav_arrows_normal',
            [
                'label'     => __('Normal', 'uicore-elements'),
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );

        $this->add_control(
            'arrows_color',
            [
                'label'     => __('Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-button i' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .ui-e-button svg' => 'fill: {{VALUE}}',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_control(
            'arrows_background',
            [
                'label'     => __('Background', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-button' => 'background-color: {{VALUE}}',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'      => 'nav_arrows_border',
                'selector'  => '{{WRAPPER}} .ui-e-button',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_responsive_control(
            'arrows_radius',
            [
                'label'      => __('Border Radius', 'uicore-elements'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .ui-e-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_responsive_control(
            'arrows_padding',
            [
                'label'      => esc_html__('Padding', 'uicore-elements'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .ui-e-button' => 'padding: {{TOP}}{{UNIT || 0}} {{RIGHT}}{{UNIT || 0}} {{BOTTOM}}{{UNIT || 0}} {{LEFT}}{{UNIT || 0}};',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_responsive_control(
            'arrows_size',
            [
                'label'     => __('Size', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 16,
                    'unit' => 'px'
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-button i' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .ui-e-button svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'arrows_box_shadow',
                'selector' => '{{WRAPPER}} .ui-e-button',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tabs_nav_arrows_hover',
            [
                'label'     => __('Hover', 'uicore-elements'),
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );

        $this->add_control(
            'arrows_hover_color',
            [
                'label'     => __('Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-button:hover i' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .ui-e-button:hover svg' => 'fill: {{VALUE}}',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_control(
            'arrows_hover_background',
            [
                'label'     => __('Background', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-button:hover' => 'background-color: {{VALUE}}',

                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_control(
            'nav_arrows_hover_border_color',
            [
                'label'     => __('Border Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-button:hover' => 'border-color: {{VALUE}};',
                ],
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'arrows_hover_box_shadow',
                'selector' => '{{WRAPPER}} .ui-e-button:hover',
                'conditions' => $this->nav_conditions('arrows'),
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_control(
            'hr_1',
            [
                'type'      => Controls_Manager::DIVIDER,
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_control(
            'dots_heading',
            [
                'label'     => __('Dots', 'uicore-elements'),
                'type'      => Controls_Manager::HEADING,
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );

        $this->start_controls_tabs('tabs_navigation_dots_style');

        $this->start_controls_tab(
            'tabs_nav_dots_normal',
            [
                'label'     => __('Normal', 'uicore-elements'),
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );

        $this->add_control(
            'dots_color',
            [
                'label'     => __('Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot' => 'background-color: {{VALUE}}',
                ],
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_control(
            'dots_space_between',
            [
                'label'     => __('Space Between Dots', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot' => 'margin: 0 {{SIZE}}{{UNIT}};',
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 15,
                        'step' => 1,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 8,
                ],
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_responsive_control(
            'dots_size',
            [
                'label'     => __('Size', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 5,
                        'max' => 20,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 8,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '===',
                            'value' => '',
                        ]
                    ]
                ),
            ]
        );
        $this->add_control(
            'advanced_dots_size',
            [
                'label'     => __('Advanced Size', 'uicore-elements'),
                'type'      => Controls_Manager::SWITCHER,
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_responsive_control(
            'advanced_dots_width',
            [
                'label'     => __('Width', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 1,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'size' => 6,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '==',
                            'value' => 'yes',
                        ]
                    ]
                ),
            ]
        );
        $this->add_responsive_control(
            'advanced_dots_height',
            [
                'label'     => __('Height', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 1,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'size' => 6,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '==',
                            'value' => 'yes',
                        ]
                    ]
                ),
            ]
        );
        $this->add_control(
            'advanced_dots_radius',
            [
                'label'      => esc_html__('Border Radius', 'uicore-elements'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .ui-e-dots .dot' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '==',
                            'value' => 'yes',
                        ]
                    ]
                ),
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'dots_box_shadow',
                'selector' => '{{WRAPPER}} .ui-e-dots .dot',
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tabs_nav_dots_active',
            [
                'label'     => __('Active', 'uicore-elements'),
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );

        $this->add_control(
            'active_dot_color',
            [
                'label'     => __('Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'background-color: {{VALUE}}',
                ],
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );
        $this->add_responsive_control(
            'active_dots_size',
            [
                'label'     => __('Size', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 5,
                        'max' => 20,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '===',
                            'value' => '',
                        ]
                    ]
                ),
            ]
        );
        $this->add_responsive_control(
            'active_advanced_dots_width',
            [
                'label'     => __('Width', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 1,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'size' => 15,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '==',
                            'value' => 'yes',
                        ]
                    ]
                ),
            ]
        );
        $this->add_responsive_control(
            'active_advanced_dots_height',
            [
                'label'     => __('Height', 'uicore-elements'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 1,
                        'max' => 50,
                    ],
                ],
                'default' => [
                    'size' => 6,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '==',
                            'value' => 'yes',
                        ]
                    ]
                ),
            ]
        );
        $this->add_control(
            'active_advanced_dots_radius',
            [
                'label'      => esc_html__('Border Radius', 'uicore-elements'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'conditions' =>  $this->nav_conditions(
                    'dots',
                    [
                        [
                            'name' => 'advanced_dots_size',
                            'operator' => '==',
                            'value' => 'yes',
                        ]
                    ]
                ),
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'dots_active_box_shadow',
                'selector' => '{{WRAPPER}} .ui-e-dots .dot.is-selected',
                'conditions' =>  $this->nav_conditions('dots'),
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_control(
            'hr_2',
            [
                'type'      => Controls_Manager::DIVIDER,
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_control(
            'fraction_heading',
            [
                'label'     => __('Fractions', 'uicore-elements'),
                'type'      => Controls_Manager::HEADING,
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_control(
            'fraction_bg_color',
            [
                'label'     => __('Background Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-fraction' => 'background-color: {{VALUE}}',
                ],
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_control(
            'fraction_padding',
            [
                'label'      => esc_html__('Padding', 'uicore-elements'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .ui-e-fraction' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_control(
            'fraction_radius',
            [
                'label'      => esc_html__('Border Radius', 'uicore-elements'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .ui-e-fraction' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'      => 'fraction_border',
                'selector'  => '{{WRAPPER}} .ui-e-fraction',
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_control(
            'fraction_color',
            [
                'label'     => __('Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-fraction, {{WRAPPER}} .ui-e-fraction .ui-e-total' => 'color: {{VALUE}}',
                ],
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_control(
            'active_fraction_color',
            [
                'label'     => __('Active Color', 'uicore-elements'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ui-e-fraction .swiper-pagination-current' => 'color: {{VALUE}}',
                ],
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'      => 'fraction_typography',
                'label'     => esc_html__('Typography', 'uicore-elements'),
                'selector'  => '{{WRAPPER}} .ui-e-fraction span, {{WRAPPER}} .ui-e-fraction',
                'conditions' => $this->nav_conditions('fraction'),
            ]
        );

        $this->end_controls_section();
    }
    /**
     * Register Additional Controls that might change depending on the widget
     *
     * @param bool $is_slider - Enable specific slider control(s)
     */
    function TRAIT_register_carousel_additional_controls($is_slider = false)
    {
        $this->add_responsive_control(
            'carousel_gap',
            [
                'label'   => __('Item Gap', 'uicore-elements'),
                'type'    => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 20,
                ],
                'range'   => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'frontend_available' => true,
            ]
        );
        $this->add_control(
            'match_height',
            [
                'label'     => __('Match Item Height', 'uicore-elements'),
                'type'      => Controls_Manager::SWITCHER,
                'default'   => 'yes',
                'prefix_class' => 'ui-e-match-height-',
                'conditions' => [
                    'relation' => 'or',
                    'terms' => [
                        [
                            'name' => 'animation_style',
                            'operator' => '!==',
                            'value' => 'marquee',
                        ],
                        [
                            'relation' => 'and',
                            'terms' => [
                                [
                                    'name' => 'animation_style',
                                    'operator' => '===',
                                    'value' => 'marquee',
                                ],
                                [
                                    'name' => 'vertical',
                                    'operator' => '!==',
                                    'value' => 'true',
                                ]
                            ],
                        ],
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-wrp' => 'height: auto',
                    '{{WRAPPER}} .ui-e-animations-wrp, {{WRAPPER}} .ui-e-item' => 'height: 100%'
                ]
            ]
        );
        if ($is_slider) {
            $this->add_control(
                'slider_height',
                [
                    'label'   => __('Slide Height', 'uicore-elements'),
                    'type'    => Controls_Manager::SLIDER,
                    'size_units' => ['px', '%', 'em', 'rem'],
                    'range'   => [
                        'px' => [
                            'min' => 80,
                            'max' => 1000,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .ui-e-wrp' => 'height: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}}',
                        '{{WRAPPER}} .ui-e-item' => 'height: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}}',
                    ]
                ]
            );
        }
    }

    /**
     * Apply common updates Slider widgets, that inherits their respective Carousel version, needs.
     *
     * @param bool $item_animation - If the Carousel version of the widget has item animations,
     * set this to true to remove the animation controls
     *
     * @since 1.2.1
     */
    function TRAIT_update_slider_controls($item_animation = true)
    {

        $animations = [
            'coverflow'  => esc_html__('Coverflow', 'uicore-elements'),
            'fade' => esc_html__('Fade', 'uicore-elements'),
            'cards' => esc_html__('Cards', 'uicore-elements'),
            'flip' => esc_html__('Flip', 'uicore-elements'),
            //'creative' => esc_html__('Creative', 'uicore-elements'), //TODO: enable creative again after fixing arrows bug
            'stacked' => esc_html__('Stacked', 'uicore-elements'),
        ];

        // Testimonial slider specifics
        if ($this->get_name() === 'uicore-testimonial-slider') {
            $animations['circular_avatar'] = esc_html__('Circular Avatar', 'uicore-elements');
        }

        // Update animations
        $this->update_control(
            'animation_style',
            [
                'default' => 'fade',
                'options' => $animations
            ]
        );

        // Remove controls specifically meant for carousel, not slide type widgets
        $this->remove_responsive_control('slides_per_view');
        $this->remove_control('show_hidden');
        $this->remove_control('fade_edges');
        $this->remove_control('fade_edges_alert');
        $this->remove_control('match_height');
        $this->remove_control('carousel_gap');

        // Remove item animation controls
        if ($item_animation) {
            $this->remove_control('animate_items');
            $this->remove_control('item_hover_animation');
        }
    }

    // Navigation rendering
    function render_carousel_dots()
    {
        // TODO: fully replace `ui-e-dots` for `ui-e-carousel-dots`, after, at least, 3 releases from 1.2.0
?>
        <div class="swiper-pagination ui-e-dots ui-e-carousel-dots"></div>
    <?php
    }
    function render_carousel_arrows()
    {
        $settings = $this->get_settings_for_display();
        // TODO: fully replace `ui-e-button` for `ui-e-carousel-button`, after, at least, 3 releases from 1.2.0
    ?>
        <div class="ui-e-button ui-e-carousel-button ui-e-previous" role="button" aria-label="Previous slide">
            <?php Icons_Manager::render_icon($settings['previous_arrow'], ['aria-hidden' => 'true']); ?>
        </div>
        <div class="ui-e-button ui-e-carousel-button ui-e-next" role="button" aria-label="Next slide">
            <?php Icons_Manager::render_icon($settings['next_arrow'], ['aria-hidden' => 'true']); ?>
        </div>
    <?php
    }
    function render_carousel_fraction()
    {
        // TODO: fully replace `ui-e-fraction` for `ui-e-carousel-fraction`, after, at least, 3 releases from 1.2.0
    ?>
        <div class="ui-e-fraction ui-e-carousel-fraction">
            <span class="ui-e-current"></span>
            /
            <span class="ui-e-total"></span>
        </div>
        <?php
    }

    function TRAIT_render_carousel_navigations($total_slides = false)
    {
        $navigation = $this->get_settings_for_display('navigation');

        if ($total_slides <= $this->get_settings('slides_per_view') || ! isset($navigation)) {
            return;
        }

        // Migration code from old navigation select2 array values - TODO: can only be removed when the all design library is updated
        if (is_array($navigation)) {
            $navigation = implode('-', $navigation);
        }


        if (strpos($navigation, 'dots') !== false) {
            $this->render_carousel_dots();
        }
        if (strpos($navigation, 'arrows') !== false) {
            $this->render_carousel_arrows();
        }
        if (strpos($navigation, 'fraction') !== false) {
            $this->render_carousel_fraction();
        }
    }

    /**
     * Calculates how much slides should be duplicated so loop can work
     * TODO: move to class helper OR find a way of traits being able to use it without usin carousel trait
     *
     * @param int $total_slides
     *
     * @return int Number of slides to duplicate
     */
    function TRAIT_get_duplication_diff($total_slides)
    {
        return abs($total_slides - $this->get_settings('slides_per_view'));
    }

    /**
     * Renders a warning in the editor, explaning that with centered slides, loop, and an even number of slides per view,
     * for the carousel to work properly we need a minimum amount of slides.
     */
    function TRAIT_render_center_loop_warning($total_slides)
    {
        if (! $this->is_edit_mode()) {
            return;
        }

        if (
            $this->get_settings('center_slides') &&
            $this->get_settings('loop') &&
            $this->get_settings('slides_per_view') % 2 === 0 &&
            $total_slides < ($this->get_settings('slides_per_view') + 2)
        ) {

            $per_view = $this->get_settings('slides_per_view');

        ?>
            <div style="background: red; mix-blend-mode: difference; padding: 15px; border-radius: 5px;">

                <span style="color: white; font-size: 1.2em; font-weight: bold;">
                    <?php echo esc_html__("Warning", 'uicore-elements'); ?>
                </span>

                <p style="color: white; margin-bottom: 0px;">
                    <?php echo sprintf(
                        "You enabled centered slides, loop, and have an even number of slides per view (%1\$s slides per view). For this configuration to work properly, you need to have %2\$s more slide(s) or disable one of the mentioned features.",
                        $per_view,
                        ($per_view + 2) - $total_slides
                    ); ?>
                </p>
            </div>
<?php
        }
    }
}

```