Na}{

File Content: `carousel_settings.php`

<?php
namespace WGL_Extensions\Includes;

defined('ABSPATH') || exit;

use Elementor\{
    Frontend,
    Controls_Manager,
    Group_Control_Border,
    Group_Control_Box_Shadow
};

use WGL_Extensions\WGL_Framework_Global_Variables;

if (!class_exists('WGL_Carousel_Settings')) {
    /**
     * WGL Elementor Carousel Settings
     *
     *
     * @package wuko-core\includes\elementor
     * @author WebGeniusLab <webgeniuslab@gmail.com>
     * @since 1.0.0
     */
    class WGL_Carousel_Settings
    {
        private static $instance;

        public static function add_controls($self, $extra_fields = [])
        {
            $self->start_controls_section(
                'content_carousel',
                ['label' => esc_html__('Carousel Options', 'wuko-core')]
            );

            $self->add_control(
                'use_carousel',
                [
                    'label' => esc_html__('Use Carousel', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'default' => ($extra_fields['use_carousel']['default'] ?? ''),
                ]
            );

            self::add_general_controls($self, [
                'slider_container_padding' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['slider_container_padding']['default'] ?? null),
                    'tablet_default' => ($extra_fields['slider_container_padding']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['slider_container_padding']['mobile_default'] ?? null),
                ],
                'slider_alignment_v' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['slider_alignment_v']['default'] ?? null),
                ],
                'slides_transition' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                ],
                'disable_overflow' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                ],
                'carousel_appear_animation' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['carousel_appear_animation']['default'] ?? null),
                ],
                'variable_width' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['variable_width']['default'] ?? null),
                ],
                'variable_width_height' => [
                    'condition' => [ 'use_carousel' => 'yes' ] + ($extra_fields['variable_width_height']['condition'] ?? []),
                    'default' => ($extra_fields['variable_width_height']['default'] ?? null),
                    'wrapper' => ($extra_fields['variable_width_height']['wrapper'] ?? null),
                ],
                'chess_layout_enable' => !empty($extra_fields['chess_layout_enable']),
                'chess_layout_invert' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['chess_layout_invert']['default'] ?? null),
                ],
                'chess_offset' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['chess_offset']['default'] ?? null),
                ],
                '3d_animation_options' => !empty($extra_fields['3d_animation_options']) ? $extra_fields['3d_animation_options'] : '',
                'animation_style_disable' => !empty($extra_fields['animation_style_disable']) ? $extra_fields['animation_style_disable'] : '',
                'animation_style' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['animation_style']['default'] ?? null),
                ],
                'animation_vertical_padding' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['animation_vertical_padding']['default'] ?? null),
                    'tablet_default' => ($extra_fields['animation_vertical_padding']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['animation_vertical_padding']['mobile_default'] ?? null),
                ],
                'animation_triggered_by_mouse' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                ],
                'opacity_slides' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['opacity_slides']['default'] ?? null),
                ],
                'opacity_slides_additional' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                ],
                'autoplay' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                ],
                'linear_animation' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['linear_animation']['default'] ?? ''),
                ],
                'slider_infinite' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['slider_infinite']['default'] ?? ''),
                ],
                'slide_per_single' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['slide_per_single']['default'] ?? ''),
                ],
                'adaptive_height' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                ],
                'fade_animation' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                ],
                'center_mode' => [
                    'condition' => [ 'use_carousel' => 'yes' ],
                    'default' => ($extra_fields['slide_per_single']['default'] ?? ''),
                ],
            ]);

            $self->add_control(
                'pagination_divider',
                [
                    'type' => Controls_Manager::DIVIDER,
                    'condition' => [
                        'use_pagination!' => '',
                        'use_carousel!' => '',
                        'linear_animation!' => 'yes'
                    ],
                ]
            );

            self::add_pagination_controls($self, [
                'use_pagination' => [
                    'condition' => [
                        'use_carousel' => 'yes',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ],
                    'default' => ($extra_fields['use_pagination']['default'] ?? ''),
                ],
                'pagination_type' => [
                    'condition' => [
                        'use_carousel' => 'yes',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ],
                    'default' => ($extra_fields['pagination_type']['default'] ?? null),
                ],
                'pagination_dynamic' => [
                    'condition' => [
                        'use_carousel' => 'yes',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ],
                    'default' => ($extra_fields['pagination_dynamic']['default'] ?? ''),
                ],
                'pagination_align' => [
                    'condition' => [
                        'use_carousel' => 'yes',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ],
                    'default' => ($extra_fields['pagination_align']['default'] ?? null),
                    'tablet_default' => ($extra_fields['pagination_align']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['pagination_align']['mobile_default'] ?? null),
                ],
                'pagination_margin' => [
                    'condition' => [
                        'use_carousel' => 'yes',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ],
                    'default' => ($extra_fields['pagination_margin']['default'] ?? null),
                    'tablet_default' => ($extra_fields['pagination_margin']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['pagination_margin']['mobile_default'] ?? null),
                ],
                'pagination_custom_colors' => [
                    'condition' => [
                        'use_carousel!' => '',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ],
                ],
                'pagination_style' => [
                    'condition' => [
                        'use_carousel!' => '',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ],
                ]
            ]);

            $self->add_control(
                'pagination_navigation_divider',
                [
                    'type' => Controls_Manager::DIVIDER,
                    'conditions' => [
                        'relation' => 'or',
                        'terms' => [[
                            'terms' => [
                                [
                                    'name' => 'use_pagination',
                                    'operator' => '!=',
                                    'value' => '',
                                ], [
                                    'name' => 'use_carousel',
                                    'operator' => '!=',
                                    'value' => '',
                                ]
                            ]
                        ], [
                            'terms' => [
                                [
                                    'name' => 'use_navigation',
                                    'operator' => '!=',
                                    'value' => '',
                                ], [
                                    'name' => 'use_carousel',
                                    'operator' => '!=',
                                    'value' => '',
                                ]
                            ]
                        ],],
                    ],
                ]
            );

            self::add_navigation_controls($self, [
                'use_navigation' => [
                    'condition' => [
                        'use_carousel' => 'yes',
                        'linear_animation!' => 'yes'
                    ],
                    'default' => ($extra_fields['use_navigation']['default'] ?? null),
                ],
                'navigation_distance' => [
                    'condition' => ($extra_fields['navigation_distance']['condition'] ?? null),
                    'default' => ($extra_fields['navigation_distance']['default'] ?? null),
                    'tablet_default' => ($extra_fields['navigation_distance']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['navigation_distance']['mobile_default'] ?? null),
                ],
                'navigation_position' => [
                    'condition' => ($extra_fields['navigation_position']['condition'] ?? null),
                    'default' => ($extra_fields['navigation_position']['default'] ?? null),
                ],
                'navigation_alignment_h' => [
                    'condition' => ($extra_fields['navigation_alignment_h']['condition'] ?? null),
                    'default' => ($extra_fields['navigation_alignment_h']['default'] ?? null),
                ],
                'navigation_alignment_v' => [
                    'condition' => ($extra_fields['navigation_alignment_v']['condition'] ?? null),
                    'default' => ($extra_fields['navigation_alignment_v']['default'] ?? null),
                ],
                'navigation_margin' => [
                    'condition' => ($extra_fields['navigation_margin']['condition'] ?? null),
                    'default' => ($extra_fields['navigation_margin']['default'] ?? null),
                    'tablet_default' => ($extra_fields['navigation_margin']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['navigation_margin']['mobile_default'] ?? null),
                ],
            ]);

            $self->add_control(
                'navigation_responsive_divider',
                [
                    'type' => Controls_Manager::DIVIDER,
                    'conditions' => [
                        'relation' => 'or',
                        'terms' => [[
                            'terms' => [
                                [
                                    'name' => 'use_navigation',
                                    'operator' => '!=',
                                    'value' => '',
                                ], [
                                    'name' => 'use_carousel',
                                    'operator' => '!=',
                                    'value' => '',
                                ]
                            ]
                        ], [
                            'terms' => [
                                [
                                    'name' => 'customize_responsive',
                                    'operator' => '!=',
                                    'value' => '',
                                ], [
                                    'name' => 'use_carousel',
                                    'operator' => '!=',
                                    'value' => '',
                                ]
                            ]
                        ],],
                    ],
                ]
            );

            self::add_responsive_controls($self, [
                'customize_responsive' => [
                    'condition' => [
                        'use_carousel' => 'yes',
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ]
                ],
            ]);

            $self->end_controls_section();
        }

        public static function add_general_controls($self, $extra_fields = [])
        {
            $self->add_responsive_control(
                'slider_container_padding',
                [
                    'label' => esc_html__('Container Padding', 'wuko-core'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'condition' => ($extra_fields['slider_container_padding']['condition'] ?? []),
                    'render_type' => 'template',
                    'size_units' => ['px', 'em', '%', 'custom'],
                    'default' => $extra_fields['slider_container_padding']['default'] ?? [],
                    'tablet_default' => ($extra_fields['slider_container_padding']['tablet_default'] ?? []),
                    'mobile_default' => ($extra_fields['slider_container_padding']['mobile_default'] ?? []),
                    'selectors' => [
                        '{{WRAPPER}} .wgl-carousel.animation-style-3d' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                        '{{WRAPPER}} .wgl-carousel_wrapper' => 'padding: 0 {{RIGHT}}{{UNIT}} 0 {{LEFT}}{{UNIT}};',
                        '{{WRAPPER}} .wgl-carousel.swiper' => 'padding: {{TOP}}{{UNIT}} 0 {{BOTTOM}}{{UNIT}} 0;',
                    ],
                ]
            );

            $self->add_responsive_control(
                'slider_alignment_v',
                [
                    'label' => esc_html__('Vertical Alignment', 'wuko-core'),
                    'type' => Controls_Manager::CHOOSE,
                    'condition' => [
                            'animation_style' => 'default',
                        ] + ( $extra_fields[ 'slider_alignment_v' ][ 'condition' ] ?? [] ),
                    'toggle' => false,
                    'options' => [
                        'flex-start' => [
                            'title' => esc_html__('Top', 'wuko-core'),
                            'icon' => 'eicon-v-align-top',
                        ],
                        'center' => [
                            'title' => esc_html__('Middle', 'wuko-core'),
                            'icon' => 'eicon-v-align-middle',
                        ],
                        'flex-end' => [
                            'title' => esc_html__('Bottom', 'wuko-core'),
                            'icon' => 'eicon-v-align-bottom',
                        ],
                    ],
                    'default' => ( $extra_fields[ 'slider_alignment_v' ][ 'default' ] ?? 'flex-start' ),
                    'selectors' => [
                        '{{WRAPPER}} .swiper-wrapper,
                         {{WRAPPER}} .swiper-vertical .swiper-slide' => 'align-items: {{VALUE}};',
                    ],
                ]
            );

            $self->add_control(
                'slides_transition',
                [
                    'label' => esc_html__( 'Animation Duration (ms)', 'wuko-core' ),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'render_type' => 'template',
                    'condition' => ( $extra_fields[ 'slides_transition' ][ 'condition' ] ?? [] ),
                    'min' => 1,
                    'placeholder' => '800',
                    'default' => ( $extra_fields[ 'slides_transition' ][ 'default' ] ?? 800 ),
                    'selectors' => [
                        '{{WRAPPER}} .wgl-carousel_swiper' => '--wgl-gallery-duration: {{VALUE}}ms;',
                        '{{WRAPPER}} .animation-style-3d .wgl-carousel_wrap' => 'transition-duration: calc({{VALUE}}ms + 300ms);',
                        '{{WRAPPER}} .animation-style-3d .swiper-slide' => 'transition-property: transform, opacity; transition-duration: {{VALUE}}ms, calc({{VALUE}}ms + 300ms);',
                    ],
                ]
            );

            $self->add_control(
                'disable_overflow',
                [
                    'label' => esc_html__('Disable Overflow', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => ( $extra_fields[ 'disable_overflow' ][ 'condition' ] ?? [] ),
                    'selectors' => [
                        '{{WRAPPER}} .swiper-container' => 'overflow: visible;',
                    ],
                ]
            );
            $self->add_control(
                'carousel_appear_animation',
                [
                    'label' => esc_html__('Appear Animation', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'default' => ($extra_fields['carousel_appear_animation']['default'] ?? ''),
                    'condition' => [
                        'animation_style' => ['default'],
                        ] + ($extra_fields['carousel_appear_animation']['condition'] ?? []),
                ]
            );
            $self->add_control(
                'variable_width',
                [
                    'label' => esc_html__('Variable Width', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'render_type' => 'template',
                    'condition' => [
                            'animation_style' => ['default', 'default_vertical'],
                        ] + ($extra_fields['variable_width']['condition'] ?? []),
                    'default' => ($extra_fields['variable_width']['default'] ?? ''),
                ]
            );

            $self->add_responsive_control(
                'variable_width_height',
                [
                    'label' => esc_html__('Set Height', 'wuko-core'),
                    'type' => Controls_Manager::NUMBER,
                    'dynamic' => ['active' => true],
                    'condition' => [
                            'animation_style' => ['default', 'default_vertical'],
                            'variable_width!' => '',
                        ] + ($extra_fields['variable_width_height']['condition'] ?? []),
                    'selectors' => [
                        '{{WRAPPER}} '.($extra_fields['variable_width_height']['wrapper'] ?? '.swiper-slide') => 'height: {{VALUE}}px;',
                    ],
                ]
            );

            if(!empty($extra_fields['chess_layout_enable'])){
                $self->add_control(
                    'chess_layout',
                    [
                        'label' => esc_html__('Chess Layout', 'wuko-core'),
                        'type' => Controls_Manager::SWITCHER,
                        'separator' => 'before',
                        'condition' => [
                                'animation_style' => ['default', 'default_vertical'],
                            ] + ($extra_fields['chess_layout']['condition'] ?? []),
                        'return_value' => 'chess',
                        'prefix_class' => 'layout-',
                    ]
                );
                $self->add_control(
                    'chess_layout_invert',
                    [
                        'label' => esc_html__('Invert Chess Layout', 'wuko-core'),
                        'type' => Controls_Manager::SWITCHER,
                        'condition' => [
                                'animation_style' => ['default', 'default_vertical'],
                                'chess_layout!' => ''
                            ] + ($extra_fields['chess_layout_invert']['condition'] ?? []),
                        'return_value' => 'chess',
                        'prefix_class' => 'invert-',
                    ]
                );
                $self->add_responsive_control(
                    'chess_offset',
                    [
                        'label' => esc_html__('Chess Offset', 'wuko-core'),
                        'type' => Controls_Manager::SLIDER,
                        'dynamic' => ['active' => true],
                        'size_units' => ['px', 'rem'],
                        'range' => [
                            'px' => ['min' => 1, 'max' => 300],
                            'rem' => ['min' => 0.1, 'max' => 20, 'step' => 0.1],
                        ],
                        'default' => ['size' => 60],
                        'tablet_default' => ['size' => 30],
                        'mobile_default' => ['size' => 0],
                        'condition' => [
                                'animation_style' => ['default', 'default_vertical'],
                                'chess_layout!' => ''
                            ] + ($extra_fields['chess_offset']['condition'] ?? []),
                        'selectors' => [
                            '{{WRAPPER}} .swiper-container' => 'padding-top: {{SIZE}}{{UNIT}} !important;',

                            '{{WRAPPER}}:not(.invert-chess) .swiper-slide:nth-child(even),
                             {{WRAPPER}}.invert-chess .swiper-slide:nth-child(odd)' => 'margin-top: -{{SIZE}}{{UNIT}};',

                            '{{WRAPPER}} .center-mode .swiper-slide.swiper-slide-active' => 'margin-top: calc(-{{SIZE}}{{UNIT}} / 2);',
                        ],
                    ]
                );
                $self->add_control(
                    'chess_notice',
                    [
                        'type' => Controls_Manager::RAW_HTML,
                        'condition' => [
                                'animation_style' => ['default', 'default_vertical'],
                                'chess_layout!' => ''
                            ] + ($extra_fields['chess_layout_invert']['condition'] ?? []),
                        'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
                        'raw' => esc_html__('Note: even number of Case Items is preffered.', 'wuko-core'),
                    ]
                );
            }
            $self->add_control(
                'animation_style',
                [
                    'label' => esc_html__('Animation Style', 'wuko-core'),
                    'type' => empty($extra_fields['animation_style_disable']) ? Controls_Manager::SELECT : Controls_Manager::HIDDEN,
                    'condition' => ($extra_fields['animation_style']['condition'] ?? []),
                    'options' => [
                        'default' => esc_html__('Horizontal Default', 'wuko-core'),
                        'default_vertical' => esc_html__('Vertical Default', 'wuko-core'),
                    ] + ( !empty($extra_fields['3d_animation_options']) ? [
                        'horizontal' => esc_html__('Horizontal 3D', 'wuko-core'),
                        'vertical' => esc_html__('Vertical 3D', 'wuko-core'),
                    ] : [] ),
                    'default' => ($extra_fields['animation_style']['default'] ?? 'default'),
                ]
            );

            $self->add_control(
                'animation_style_v_description',
                [
                    'raw' => esc_html__( 'There will be 1 Slides per Viewing.', 'wuko-core' ),
                    'type' => Controls_Manager::RAW_HTML,
                    'condition' => ['animation_style' => 'default_vertical'],
                    'content_classes' => 'elementor-descriptor',
                ]
            );

            $self->add_responsive_control(
                'animation_vertical_padding',
                [
                    'label' => esc_html__('Visibility for Next/Prev Slides', 'wuko-core'),
                    'description' => esc_html__('Use this options to show part of Next/Prev Slides', 'wuko-core'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'allowed_dimensions' => 'vertical',
                    'condition' => ['animation_style' => ['default_vertical']] + ($extra_fields['animation_vertical_padding']['condition'] ?? []),
                    'size_units' => ['px', '%', 'vw', 'custom'],
                    'default' => $extra_fields['animation_vertical_padding']['default'] ?? [],
                    'tablet_default' => ($extra_fields['animation_vertical_padding']['tablet_default'] ?? []),
                    'mobile_default' => ($extra_fields['animation_vertical_padding']['mobile_default'] ?? []),
                    'selectors' => [
                        '{{WRAPPER}} .wgl-carousel' => 'padding-top: {{TOP}}{{UNIT}}; padding-bottom: {{BOTTOM}}{{UNIT}};',
                    ],
                ]
            );

            $self->add_control(
                'animation_triggered_by_mouse',
                [
                    'label' => esc_html__('Triggered by Mouse Wheel', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'render_type' => 'template',
                    'condition' => [
                            'linear_animation!' => 'yes'
                        ] + ($extra_fields['animation_triggered_by_mouse']['condition'] ?? []),
                    'selectors' => [
                        '{{WRAPPER}} .swiper-vertical,
                         {{WRAPPER}} .animation-direction-vertical' => 'cursor: ns-resize;',
                        '{{WRAPPER}} .swiper-horizontal,
                         {{WRAPPER}} .animation-direction-horizontal' => 'cursor: w-resize;',
                    ],
                ]
            );

            $self->add_responsive_control(
                'opacity_slides',
                [
                    'label' => esc_html__('Transparency for Slides (Exc: First)', 'wuko-core'),
                    'type' => Controls_Manager::SLIDER,
                    'dynamic' => ['active' => true],
                    'separator' => 'before',
                    'condition' => ['animation_style' => ['default', 'default_vertical']] + ($extra_fields['opacity_slides']['condition'] ?? []),
                    'range' => [
                        'px' => ['min' => 0, 'max' => 1, 'step' => 0.01 ],
                    ],
                    'default' => $extra_fields['opacity_slides']['default'] ?? [],
                    'selectors' => [
                        '{{WRAPPER}} .swiper-slide:not(.swiper-slide-active)' => 'filter: opacity({{SIZE}});',
                    ],
                ]
            );

            $self->add_responsive_control(
                'opacity_slides_additional',
                [
                    'label' => esc_html__('Transparency for Slides (Exc: First, Next, Prev)', 'wuko-core'),
                    'type' => Controls_Manager::SLIDER,
                    'dynamic' => ['active' => true],
                    'condition' => ['animation_style' => ['default', 'default_vertical']] + ($extra_fields['opacity_slides_additional']['condition'] ?? []),
                    'range' => [
                        'px' => ['min' => 0, 'max' => 1, 'step' => 0.01 ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next)' => 'filter: opacity({{SIZE}});',
                    ],
                ]
            );
            $self->add_control(
                'linear_animation',
                [
                    'label' => esc_html__('Linear Animation', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'frontend_available' => true,
                    'render_type' => 'template',
                    'condition' => [
                            'animation_style' => ['default', 'default_vertical'],
                        ] + ($extra_fields['autoplay']['condition'] ?? [])
                        + ($extra_fields['linear_animation']['condition'] ?? []),
                    'default' => ($extra_fields['linear_animation']['default'] ?? ''),
                    'selectors' => [
                        '{{WRAPPER}} .swiper-wrapper' => 'transition-timing-function: linear !important;',
                    ],
                ]
            );
            $self->add_control(
                'autoplay',
                [
                    'label' => esc_html__('Autoplay', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'separator' => 'before',
                    'condition' => [
                        'linear_animation!' => 'yes',
                        'animation_style' => ['default', 'default_vertical']
                    ] + ($extra_fields['autoplay']['condition'] ?? []),
                ]
            );

            $self->add_control(
                'autoplay_speed',
                [
                    'label' => esc_html__('Autoplay Speed (ms)', 'wuko-core'),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => [
                        'autoplay' => 'yes',
                        'linear_animation!' => 'yes',
                        'animation_style' => ['default', 'default_vertical'],
                    ] + ($extra_fields['autoplay']['condition'] ?? [])
                      + ($extra_fields['autoplay_speed']['condition'] ?? []),
                    'placeholder' => '3000',
                    'min' => 1,
                    'default' => 3000,
                ]
            );
            $self->add_control(
                'autoplay_pause',
                [
                    'label' => esc_html__('Pause On Hover', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => [
                            'autoplay' => 'yes',
                            'linear_animation!' => 'yes',
                            'animation_style' => ['default', 'default_vertical'],
                        ] + ($extra_fields['autoplay']['condition'] ?? [])
                        + ($extra_fields['autoplay_pause']['condition'] ?? []),
                    'default' => ($extra_fields['autoplay_pause']['default'] ?? 'yes'),
                ]
            );
            $self->add_control(
                'autoplay_reverse',
                [
                    'label' => esc_html__( 'Reverse Direction', 'wuko-core' ),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => [
                            'autoplay' => 'yes',
                            'animation_style' => ['default', 'default_vertical'],
                        ] + ( $extra_fields[ 'autoplay' ][ 'condition' ] ?? [] )
                        + ( $extra_fields[ 'autoplay_reverse' ][ 'condition' ] ?? [] ),
                    'default' => ( $extra_fields[ 'autoplay_reverse' ][ 'default' ] ?? '' ),
                ]
            );

            $self->add_control(
                'slider_infinite',
                [

                    'label' => esc_html__('Infinite Loop', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'separator' => 'before',
                    'condition' => [
                            'animation_style' => ['default', 'default_vertical'],
                            'linear_animation!' => 'yes'
                        ] + ($extra_fields['slider_infinite']['condition'] ?? []),
                    'default' => ($extra_fields['slider_infinite']['default'] ?? ''),
                ]
            );

            $self->add_control(
                'adaptive_height',
                [
                    'label' => esc_html__('Adaptive Height', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => ['animation_style' => ['default']] + ($extra_fields['adaptive_height']['condition'] ?? []),
                    'label_on' => esc_html__('On', 'wuko-core'),
                    'label_off' => esc_html__('Off', 'wuko-core'),
                ]
            );

            $self->add_control(
                'slide_per_single',
                [
                    'label' => esc_html__('Slide per single item', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => [
                            'animation_style' => ['default'],
                            'linear_animation!' => 'yes',
                        ] + ($extra_fields['slide_per_single']['condition'] ?? []),
                    'default' => ($extra_fields['slide_per_single']['default'] ?? ''),
                ]
            );

            $self->add_control(
                'fade_animation',
                [
                    'label' => esc_html__('Fade Animation', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => [
                        'posts_per_row' => '1',
                        'animation_style' => ['default', 'default_vertical'],
                    ] + ($extra_fields['fade_animation']['condition'] ?? []),
                ]
            );

            $self->add_control(
                'center_mode',
                [
                    'label' => esc_html__('Center Mode', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => [
                        'animation_style' => 'default',
                        'linear_animation!' => 'yes'
                    ] + ($extra_fields['center_mode']['condition'] ?? []),
                    'default' => ($extra_fields['center_mode']['default'] ?? ''),
                ]
            );
        }

        public static function add_pagination_controls($self, $extra_fields = [])
        {
            $self->add_control(
                'use_pagination',
                [
                    'label' => esc_html__('Add Pagination Controls', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => ($extra_fields['use_pagination']['condition'] ?? []),
                    'default' => ($extra_fields['use_pagination']['default'] ?? ''),
                ]
            );

            $self->add_control(
                'pagination_type',
                [
                    'label' => esc_html__('Type', 'wuko-core'),
                    'type' => 'wgl-radio-image',
                    'condition' => ['use_pagination' => 'yes'] + ($extra_fields['pagination_type']['condition'] ?? []),
                    'options' => self::get_pagination_type_options(),
                    'default' => ($extra_fields['pagination_type']['default'] ?? 'circle'),
                ]
            );

            $self->add_control(
                'pagination_dynamic',
                [
                    'label' => esc_html__('Dynamic Pagination', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => [
                        'use_pagination' => 'yes',
                        'pagination_type!' => ['fraction', 'progress', 'line_circle', 'line'],
                        ] + ($extra_fields['pagination_dynamic']['condition'] ?? []),
                    'default' => ($extra_fields['pagination_dynamic']['default'] ?? ''),
                ]
            );

            $self->add_responsive_control(
                'progress_position',
                [
                    'label' => esc_html__('Position of Dynamic Progress', 'wuko-core'),
                    'type' => Controls_Manager::CHOOSE,
                    'toggle' => true,
                    'options' => [
                        'top' => [
                            'title' => esc_html__('Top', 'wuko-core'),
                            'icon' => 'eicon-v-align-top',
                        ],
                        'bottom' => [
                            'title' => esc_html__('Bottom', 'wuko-core'),
                            'icon' => 'eicon-v-align-bottom',
                        ],
                    ],
                    'selectors_dictionary' => [
                        'top' => 'position: absolute; top: 0; left: 0; right: 0;',
                        'bottom' => 'position: static;',
                    ],
                    'condition' => [
                        'use_pagination' => 'yes',
                        'pagination_type' => 'progress',
                        ] + ($extra_fields['progress_position']['condition'] ?? []),
                    'default' => $extra_fields['progress_position']['default'] ?? 'bottom',
                    'selectors' => [
                        '{{WRAPPER}} .wgl-swiper-pagination-wrapper' => '{{VALUE}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'pagination_align',
                [
                    'label' => esc_html__('Pagination Alignment', 'wuko-core'),
                    'type' => Controls_Manager::CHOOSE,
                    'condition' => ['use_pagination' => 'yes'] + ($extra_fields['pagination_align']['condition'] ?? []),
                    'options' => [
                        'left' => [
                            'title' => esc_html__('Left', 'wuko-core'),
                            'icon' => 'eicon-text-align-left',
                        ],
                        'center' => [
                            'title' => esc_html__('Center', 'wuko-core'),
                            'icon' => 'eicon-text-align-center',
                        ],
                        'right' => [
                            'title' => esc_html__('Right', 'wuko-core'),
                            'icon' => 'eicon-text-align-right',
                        ],
                    ],
                    'default' => ($extra_fields['pagination_align']['default'] ?? 'center'),
                    'tablet_default' => ($extra_fields['pagination_align']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['pagination_align']['mobile_default'] ?? null),
                    'selectors' => [
                        '{{WRAPPER}} .wgl-carousel_wrapper .wgl-swiper-pagination-wrapper' => 'text-align: {{VALUE}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'pagination_margin',
                [
                    'label' => esc_html__('Pagination Margin', 'wuko-core'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'condition' => ['use_pagination' => 'yes'] + ($extra_fields['pagination_margin']['condition'] ?? []),
                    'size_units' => ['px', '%', 'custom'],
                    'default' => ($extra_fields['pagination_margin']['default'] ?? null),
                    'tablet_default' => ($extra_fields['pagination_margin']['tablet_default'] ?? null),
                    'mobile_default' => ($extra_fields['pagination_margin']['mobile_default'] ?? null),
                    'selectors' => [
                        '{{WRAPPER}} .wgl-carousel_wrapper .wgl-swiper-pagination-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $self->add_control(
                'pagination_custom_colors',
                [
                    'label' => esc_html__('Customize Colors', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => ['use_pagination' => 'yes'] + ($extra_fields['pagination_custom_colors']['condition'] ?? []),
                ]
            );

            $self->start_controls_tabs(
                'pagination_style',
                [
                    'condition' => [
                        'pagination_custom_colors!' => '',
                        'use_pagination!' => '',
                    ] + ($extra_fields['pagination_style']['condition'] ?? []),
                ]
            );

            $self->start_controls_tab(
                'pagination_idle',
                ['label' => esc_html__('Idle', 'wuko-core')]
            );
            $self->add_control(
                'pagination_color_idle',
                [
                    'label' => esc_html__('Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'default' => ($extra_fields['pagination_color_idle']['default'] ?? ''),
                    'selectors' => self::get_pagination_color_selectors('idle'),
                ]
            );
            $self->end_controls_tab();
            $self->start_controls_tab(
                'pagination_hover',
                ['label' => esc_html__('Hover', 'wuko-core')]
            );
            $self->add_control(
                'pagination_color_hover',
                [
                    'label' => esc_html__('Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'default' => ($extra_fields['pagination_color_hover']['default'] ?? ''),
                    'selectors' => self::get_pagination_color_selectors('hover'),
                ]
            );
            $self->end_controls_tab();
            $self->start_controls_tab(
                'pagination_active',
                ['label' => esc_html__('Active', 'wuko-core')]
            );
            $self->add_control(
                'pagination_color_active',
                [
                    'label' => esc_html__('Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'default' => ($extra_fields['pagination_color_active']['default'] ?? ''),
                    'selectors' => self::get_pagination_color_selectors('active'),
                ]
            );
            $self->end_controls_tab();
            $self->end_controls_tabs();
        }

        public static function get_pagination_type_options()
        {
            return  [
                'circle' => [
                    'title' => esc_html__('Circle', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/pag_circle.png',
                ],
                'circle_border' => [
                    'title' => esc_html__('Empty Circle', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/pag_circle_border.png',
                ],
                'square' => [
                    'title' => esc_html__('Square', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/pag_square.png',
                ],
                'square_border' => [
                    'title' => esc_html__('Empty Square', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/pag_square_border.png',
                ],
                'line' => [
                    'title' => esc_html__('Line', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/pag_line.png',
                ],
                'line_circle' => [
                    'title' => esc_html__('Line - Circle', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/pag_line_circle.png',
                ],
                'progress' => [
                    'title' => esc_html__('Show Progress', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/pag_progress.png',
                ],
                'fraction' => [
                    'title' => esc_html__('Fraction', 'wuko-core'),
                    'image' => WGL_EXTENSIONS_ELEMENTOR_URL . 'assets/img/wgl_elementor_addon/icons/wgl.png',
                ],
            ];
        }

        public static function get_pagination_color_selectors(String $state)
        {
            if ('idle' === $state) {
                return [
                   '{{WRAPPER}} .pagination_circle .swiper-pagination li button,
                    {{WRAPPER}} .pagination_line .swiper-pagination li button,
                    {{WRAPPER}} .pagination_line_circle .swiper-pagination li button,
                    {{WRAPPER}} .pagination_square .swiper-pagination li button,
                    {{WRAPPER}} .pagination_circle_border .swiper-pagination li button::before,
                    {{WRAPPER}} .pagination_square_border .swiper-pagination li button::before,
                    {{WRAPPER}} .swiper-pagination.swiper-pagination-progressbar' => 'background-color: {{VALUE}};',

                   '{{WRAPPER}} .pagination_fraction .swiper-pagination' => 'color: {{VALUE}};',

                   '{{WRAPPER}} .pagination_circle_border .swiper-pagination li button,
                    {{WRAPPER}} .swiper-pagination' => 'border-color: {{VALUE}};',

                   '{{WRAPPER}} .swiper-pagination li button' => 'opacity: 1;',
                ];
            }

            if ('hover' === $state) {
                return [
                   '{{WRAPPER}} .pagination_circle .swiper-pagination li:hover button,
                    {{WRAPPER}} .pagination_line .swiper-pagination li:hover button,
                    {{WRAPPER}} .pagination_line_circle .swiper-pagination li:hover button,
                    {{WRAPPER}} .pagination_square .swiper-pagination li:hover button,
                    {{WRAPPER}} .pagination_square_border .swiper-pagination li:hover button::before,
                    {{WRAPPER}} .pagination_circle_border .swiper-pagination li:hover button::before,
                    {{WRAPPER}}:hover .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}};',

                   '{{WRAPPER}} .pagination_circle_border .swiper-pagination li:hover button' => 'border-color: {{VALUE}};',
                ];
            }

            if ('active' === $state) {
                return [
                   '{{WRAPPER}} .pagination_circle .swiper-pagination li.swiper-pagination-bullet-active button,
                    {{WRAPPER}} .pagination_line .swiper-pagination li.swiper-pagination-bullet-active button,
                    {{WRAPPER}} .pagination_line_circle .swiper-pagination li.swiper-pagination-bullet-active button,
                    {{WRAPPER}} .pagination_square .swiper-pagination li.swiper-pagination-bullet-active button,
                    {{WRAPPER}} .pagination_square_border .swiper-pagination li.swiper-pagination-bullet-active button::before,
                    {{WRAPPER}} .pagination_circle_border .swiper-pagination li.swiper-pagination-bullet-active button::before,
                    {{WRAPPER}} .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background-color: {{VALUE}};',

                   '{{WRAPPER}} .pagination_fraction .swiper-pagination .swiper-pagination-current' => 'color: {{VALUE}};',

                   '{{WRAPPER}} .pagination_circle_border .swiper-pagination li.swiper-pagination-bullet-active button,
                    {{WRAPPER}} .pagination_square_border .swiper-pagination li.swiper-pagination-bullet-active button' => 'border-color: {{VALUE}};',
                ];
            }
        }

        public static function add_navigation_controls($self, $extra_fields = [])
        {
            $self->add_control(
                'use_navigation',
                [
                    'label' => esc_html__('Add Navigation Controls', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => ($extra_fields['use_navigation']['condition'] ?? []),
                    'default' => ($extra_fields['use_navigation']['default'] ?? ''),
                ]
            );

            $self->add_control(
                'use_title_navigation',
                [
                    'label' => esc_html__('Add Title for Navigation Controls', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'render_type' => 'template',
                    'condition' => [
                            'use_navigation' => 'yes',
                        ] + ( $extra_fields[ 'use_navigation' ][ 'condition' ] ?? [] )
                        + ( $extra_fields[ 'use_title_navigation' ][ 'condition' ] ?? [] ),
                    'default' => ($extra_fields['use_title_navigation']['default'] ?? ''),
                    'selectors' => [
                        '{{WRAPPER}} .wgl-carousel_wrapper .elementor-swiper-button .title,
                         {{WRAPPER}} .wgl-carousel_wrapper .motion-arrow .title' => 'display: block;',
                    ],
                ]
            );

            $self->add_responsive_control(
                'navigation_diameter',
                [
                    'label' => esc_html__( 'Buttons Diameter', 'wuko-core' ),
                    'type' => Controls_Manager::SLIDER,
			        'dynamic' => ['active' => true],
                    'condition' => [
                            'use_navigation' => 'yes',
                        ] + ( $extra_fields[ 'use_navigation' ][ 'condition' ] ?? [] )
                        + ( $extra_fields[ 'navigation_diameter' ][ 'condition' ] ?? [] ),
                    'size_units' => [ 'px', 'rem', 'custom'],
                    'range' => [
                        'px' => [ 'min' => 30, 'max' => 100 ],
                        'rem' => [ 'min' => 2, 'max' => 8 ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button,
                         {{WRAPPER}} .motion-arrow' => '--wgl-swiper-button-diameter: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'navigation_radius',
                [
                    'label' => esc_html__( 'Buttons Border Radius', 'wuko-core' ),
                    'type' => Controls_Manager::SLIDER,
			        'dynamic' => ['active' => true],
                    'condition' => [
                            'use_navigation' => 'yes',
                        ] + ( $extra_fields[ 'use_navigation' ][ 'condition' ] ?? [] )
                        + ( $extra_fields[ 'navigation_radius' ][ 'condition' ] ?? [] ),
                    'size_units' => [ 'px', 'rem', 'custom'],
                    'range' => [
                        'px' => [ 'min' => 0, 'max' => 100 ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button,
                         {{WRAPPER}} .motion-arrow' => '--wgl-swiper-button-radius: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'navigation_icon_size',
                [
                    'label' => esc_html__( 'Icon Size', 'wuko-core' ),
                    'type' => Controls_Manager::SLIDER,
			        'dynamic' => ['active' => true],
                    'condition' => [
                            'use_navigation' => 'yes',
                        ] + ( $extra_fields[ 'use_navigation' ][ 'condition' ] ?? [] )
                        + ( $extra_fields[ 'navigation_icon_size' ][ 'condition' ] ?? [] ),
                    'size_units' => [ 'px', 'rem', 'custom'],
                    'range' => [
                        'px' => [ 'min' => 10, 'max' => 200 ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .wgl-svg-icon,
                         {{WRAPPER}} .motion-arrow' => 'font-size: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );

            $self->add_control(
                'navigation_position',
                [
                    'label' => esc_html__('Positioning', 'wuko-core'),
                    'type' => Controls_Manager::SELECT,
                    'render_type' => 'template',
                    'condition' => ['use_navigation' => 'yes']
                        + ($extra_fields['use_navigation']['condition'] ?? [])
                        + ($extra_fields['navigation_position']['condition'] ?? []),
                    'options' => (
                        $extra_fields['navigation_position']['options'] ?? [
                            '' => esc_html__('Opposite sides', 'wuko-core'),
                            'nearby' => esc_html__('Nearby', 'wuko-core'),
                            'under_each_other' => esc_html__('Nearby - Under each other', 'wuko-core'),
                        ]
                    ),
                    'selectors_dictionary' => [
                        '' => 'justify-content: space-between;',
                        'nearby' => '',
                        'under_each_other' => 'flex-direction: column;',
                    ],
                    'default' => $extra_fields['navigation_position']['default'] ?? '',
                    'selectors' => [
                        '{{WRAPPER}} .wgl-navigation_wrapper' => '{{VALUE}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'navigation_distance',
                [
                    'label' => esc_html__('Buttons Distance', 'wuko-core'),
                    'type' => Controls_Manager::SLIDER,
			        'dynamic' => ['active' => true],
                    'size_units' => ['px', '%', 'custom'],
                    'condition' => [
                        'use_navigation' => 'yes',
                        'navigation_position!' => '' ]
                        + ($extra_fields['use_navigation']['condition'] ?? [])
                      + ($extra_fields['navigation_distance']['condition'] ?? []),
                    'range' => [
                        'px' => ['min' => -100, 'max' => 100],
                    ],
                    'default' => $extra_fields['navigation_distance']['default'] ?? ['unit' => 'px'],
                    'tablet_default' => $extra_fields['navigation_distance']['tablet_default'] ?? ['unit' => 'px'],
                    'mobile_default' => $extra_fields['navigation_distance']['mobile_default'] ?? ['unit' => 'px'],
                    'selectors' => [
                        '{{WRAPPER}} .wgl-navigation_wrapper' => 'gap: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'navigation_alignment_h',
                [
                    'label' => esc_html__('Horizontal Alignment', 'wuko-core'),
                    'type' => Controls_Manager::CHOOSE,
                    'label_block' => true,
                    'toggle' => true,
                    'options' => [
                        'flex-start' => [
                            'title' => esc_html__('Left', 'wuko-core'),
                            'icon' => 'eicon-h-align-left',
                        ],
                        'center' => [
                            'title' => esc_html__('Center', 'wuko-core'),
                            'icon' => 'eicon-h-align-center',
                        ],
                        'flex-end' => [
                            'title' => esc_html__('Right', 'wuko-core'),
                            'icon' => 'eicon-h-align-right',
                        ],
                    ],
                    'condition' => [
                            'use_navigation' => 'yes',
                            'navigation_position' => ['under_each_other', 'nearby']
                        ] + ($extra_fields['use_navigation']['condition'] ?? [])
                        + ($extra_fields['navigation_alignment_h']['condition'] ?? []),
                    'default' => $extra_fields['navigation_alignment_h']['default'] ?? 'flex-start',
                    'selectors' => [
                        '{{WRAPPER}} .wgl-navigation_wrapper' => 'justify-content: {{VALUE}};',
                        '{{WRAPPER}} .navigation-position-under_each_other .wgl-navigation_wrapper' => 'align-items: {{VALUE}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'navigation_alignment_v',
                [
                    'label' => esc_html__('Vertical Alignment', 'wuko-core'),
                    'type' => Controls_Manager::CHOOSE,
                    'label_block' => true,
                    'toggle' => true,
                    'options' => [
                        'flex-start' => [
                            'title' => esc_html__('Top', 'wuko-core'),
                            'icon' => 'eicon-v-align-top',
                        ],
                        'center' => [
                            'title' => esc_html__('Center', 'wuko-core'),
                            'icon' => 'eicon-v-align-middle',
                        ],
                        'flex-end' => [
                            'title' => esc_html__('Bottom', 'wuko-core'),
                            'icon' => 'eicon-v-align-bottom',
                        ],
                    ],
                    'condition' => [
                            'use_navigation' => 'yes',
                        ] + ($extra_fields['use_navigation']['condition'] ?? [])
                        + ($extra_fields['navigation_alignment_v']['condition'] ?? []),
                    'default' => $extra_fields['navigation_alignment_v']['default'] ?? 'center',
                    'selectors' => [
                        '{{WRAPPER}} .wgl-navigation_wrapper' => 'align-items: {{VALUE}};',
                        '{{WRAPPER}} .navigation-position-under_each_other .wgl-navigation_wrapper' => 'justify-content: {{VALUE}};',
                    ],
                ]
            );

            $self->add_responsive_control(
                'navigation_margin',
                [
                    'label' => esc_html__('Margin', 'wuko-core'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', 'em', '%', 'vw', 'custom'],
                    'condition' => [
                            'use_navigation' => 'yes',
                        ] + ($extra_fields['use_navigation']['condition'] ?? [])
                        + ($extra_fields['navigation_margin']['condition'] ?? []),
                    'default' => ($extra_fields['navigation_margin']['default'] ?? []),
                    'tablet_default' => ($extra_fields['navigation_margin']['tablet_default'] ?? []),
                    'mobile_default' => ($extra_fields['navigation_margin']['mobile_default'] ?? []),
                    'selectors' => [
                        '{{WRAPPER}} .wgl-navigation_wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $self->add_control(
                'navigation_customize_colors',
                [
                    'label' => esc_html__('Customize Colors', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => [
                        'use_navigation' => 'yes'
                        ] + ($extra_fields['use_navigation']['condition'] ?? [])
                          + ($extra_fields['navigation_customize_colors']['condition'] ?? []),
                ]
            );

            $self->add_group_control(
                Group_Control_Border::get_type(),
                [
                    'name' => 'navigation_border',
                    'condition' => [
                        'navigation_customize_colors' => 'yes',
                        'use_navigation' => 'yes',
                    ],
                    'fields_options' => [
                        'width' => ['label' => esc_html__('Border Width', 'wuko-core')],
                        'color' => [ 'type' => Controls_Manager::HIDDEN ],
                    ],
                    'selector' => '{{WRAPPER}} .elementor-swiper-button, {{WRAPPER}} .motion-arrow',

                ]
            );
            $self->start_controls_tabs(
                'navigation_style',
                [
                    'condition' => [
                        'navigation_customize_colors' => 'yes',
                        'use_navigation' => 'yes',
                    ] + ($extra_fields['use_navigation']['condition'] ?? []),
                ]
            );

            $self->start_controls_tab(
                'navigation_idle',
                ['label' => esc_html__('Idle', 'wuko-core')]
            );

            $self->add_control(
                'navigation_color_idle',
                [
                    'label' => esc_html__('Icon Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button,
                         {{WRAPPER}} .motion-arrow' => 'color: {{VALUE}};',
                    ],
                ]
            );
            $self->add_control(
                'navigation_bg_idle',
                [
                    'label' => esc_html__('Background Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button,
                         {{WRAPPER}} .motion-arrow' => 'background-color: {{VALUE}};',
                    ],
                ]
            );
            $self->add_control(
                'navigation_border_color_idle',
                [
                    'label' => esc_html__( 'Border Color', 'wuko-core' ),
                    'type' => Controls_Manager::COLOR,
                    'dynamic' => ['active' => true],
                    'condition' => [ 'navigation_border_border!' => ['', 'none'] ],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button,
                         {{WRAPPER}} .motion-arrow' => 'border-color: {{VALUE}}',
                    ],
                ]
            );
            $self->add_group_control(
                Group_Control_Box_Shadow::get_type(),
                [
                    'name' => 'navigation_shadow_idle',
                    'selector' => '{{WRAPPER}} .elementor-swiper-button, {{WRAPPER}} .motion-arrow',
                ]
            );
            $self->end_controls_tab();
            $self->start_controls_tab(
                'navigation_hover',
                ['label' => esc_html__('Hover', 'wuko-core')]
            );
            $self->add_control(
                'navigation_color_hover',
                [
                    'label' => esc_html__('Icon Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):hover,
                         {{WRAPPER}} .motion-arrow:hover' => 'color: {{VALUE}};',
                    ],
                ]
            );
            $self->add_control(
                'navigation_bg_hover',
                [
                    'label' => esc_html__('Background Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):hover,
                         {{WRAPPER}} .motion-arrow:hover' => 'background-color: {{VALUE}};',
                    ],
                ]
            );
            $self->add_control(
                'navigation_border_color_hover',
                [
                    'label' => esc_html__( 'Border Color', 'wuko-core' ),
                    'type' => Controls_Manager::COLOR,
                    'dynamic' => ['active' => true],
                    'condition' => [ 'navigation_border_border!' => ['', 'none'] ],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):hover,
                         {{WRAPPER}} .motion-arrow:hover' => 'border-color: {{VALUE}}',
                    ],
                ]
            );
            $self->add_group_control(
                Group_Control_Box_Shadow::get_type(),
                [
                    'name' => 'navigation_shadow_hover',
                    'selector' => '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):hover',
                ]
            );
            $self->end_controls_tab();
            $self->start_controls_tab(
                'navigation_active',
                ['label' => esc_html__('Active', 'wuko-core')]
            );
            $self->add_control(
                'navigation_color_active',
                [
                    'label' => esc_html__('Icon Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):active' => 'color: {{VALUE}};',
                    ],
                ]
            );
            $self->add_control(
                'navigation_bg_active',
                [
                    'label' => esc_html__('Background Color', 'wuko-core'),
                    'type' => Controls_Manager::COLOR,
			        'dynamic' => ['active' => true],
                    'selectors' => [
                        '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):active' => 'background-color: {{VALUE}};',
                    ],
                ]
            );
            $self->add_group_control(
                Group_Control_Border::get_type(),
                [
                    'name' => 'navigation_border_active',
                    'fields_options' => [
                        'width' => ['label' => esc_html__('Border Width', 'wuko-core')],
                        'color' => ['label' => esc_html__('Border Color', 'wuko-core')],
                    ],
                    'selector' => '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):active,'
                                . '{{WRAPPER}} .motion-arrow:active',
                ]
            );

            $self->add_group_control(
                Group_Control_Box_Shadow::get_type(),
                [
                    'name' => 'navigation_shadow_active',
                    'selector' => '{{WRAPPER}} .elementor-swiper-button:not(.swiper-button-disabled):active',
                ]
            );

            $self->end_controls_tab();
            $self->end_controls_tabs();
        }

        public static function add_responsive_controls($self, $extra_fields = [])
        {
            $default_breakpoints = self::get_default_responsive_breakpoints();

            $self->add_control(
                'customize_responsive',
                [
                    'label' => esc_html__('Customize Responsive', 'wuko-core'),
                    'type' => Controls_Manager::SWITCHER,
                    'condition' => ($extra_fields['customize_responsive']['condition'] ?? []),
                ]
            );

            $self->add_control(
                'heading_widescreen',
                [
                    'label' => esc_html__('Widescreen Desktop Settings', 'wuko-core'),
                    'type' => Controls_Manager::HEADING,
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['heading_widescreen']['condition'] ?? []),
                ]
            );
            $self->add_control(
                'widescreen_breakpoint',
                [
                    'label' => esc_html__('Screen Breakpoint', 'wuko-core'),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['widescreen_breakpoint']['condition'] ?? []),
	                'description' => esc_html__('Equal or greater width screens are targeted.', 'wuko-core'),
                    'placeholder' => esc_attr($default_breakpoints['widescreen']),
                    'min' => 360,
                    'default' => ($extra_fields['widescreen_breakpoint']['default'] ?? $default_breakpoints['widescreen']),
                ]
            );
            $self->add_control(
                'widescreen_slides',
                [
                    'label' => ($extra_fields['widescreen_slides']['label'] ?? esc_html__('Slides to show', 'wuko-core')),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['widescreen_slides']['condition'] ?? []),
                    'min' => 1,
                    'max' => ($extra_fields['widescreen_slides']['max'] ?? ''),
                ]
            );

            $self->add_control(
                'heading_desktop',
                [
                    'label' => esc_html__('Desktop Settings', 'wuko-core'),
                    'type' => Controls_Manager::HEADING,
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['heading_desktop']['condition'] ?? []),
                    'separator' => 'before',
                ]
            );
            $self->add_control(
                'desktop_breakpoint',
                [
                    'label' => esc_html__('Screen Breakpoint', 'wuko-core'),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['desktop_breakpoint']['condition'] ?? []),
	                'description' => esc_html__('Equal or greater width screens are targeted.', 'wuko-core'),
                    'placeholder' => esc_attr($default_breakpoints['desktop']),
                    'min' => 360,
                    'default' => ($extra_fields['desktop_breakpoint']['default'] ?? $default_breakpoints['desktop']),
                ]
            );
            $self->add_control(
                'desktop_slides',
                [
                    'label' => ($extra_fields['desktop_slides']['label'] ?? esc_html__('Slides to show', 'wuko-core')),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['desktop_slides']['condition'] ?? []),
                    'min' => 1,
                    'max' => ($extra_fields['desktop_slides']['max'] ?? ''),
                ]
            );

            $self->add_control(
                'heading_tablet',
                [
                    'label' => esc_html__('Tablet Settings', 'wuko-core'),
                    'type' => Controls_Manager::HEADING,
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['heading_tablet']['condition'] ?? []),
                    'separator' => 'before',
                ]
            );
            $self->add_control(
                'tablet_breakpoint',
                [
                    'label' => esc_html__('Screen Breakpoint', 'wuko-core'),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['tablet_breakpoint']['condition'] ?? []),
	                'description' => esc_html__('Equal or greater width screens are targeted.', 'wuko-core'),
                    'placeholder' => esc_attr($default_breakpoints['tablet']),
                    'min' => 320,
                    'default' => ($extra_fields['tablet_breakpoint']['default'] ?? $default_breakpoints['tablet']),
                ]
            );

            $self->add_control(
                'tablet_slides',
                [
                    'label' => ($extra_fields['tablet_slides']['label'] ?? esc_html__('Slides to show', 'wuko-core')),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['tablet_slides']['condition'] ?? []),
                    'min' => 1,
                    'max' => ($extra_fields['tablet_slides']['max'] ?? ''),
                ]
            );

            $self->add_control(
                'heading_mobile',
                [
                    'label' => esc_html__('Mobile Settings', 'wuko-core'),
                    'type' => Controls_Manager::HEADING,
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['heading_mobile']['condition'] ?? []),
                    'separator' => 'before',
                ]
            );

            $self->add_control(
                'mobile_breakpoint',
                [
                    'label' => esc_html__('Screen Breakpoint', 'wuko-core'),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['mobile_breakpoint']['condition'] ?? []),
	                'description' => esc_html__('Equal or greater width screens are targeted.', 'wuko-core'),
                    'placeholder' => esc_attr($default_breakpoints['mobile']),
                    'min' => 280,
                    'default' => ($extra_fields['mobile_breakpoint']['default'] ?? $default_breakpoints['mobile']),
                ]
            );

            $self->add_control(
                'mobile_slides',
                [
                    'label' => ($extra_fields['mobile_slides']['label'] ?? esc_html__('Slides to show', 'wuko-core')),
                    'type' => Controls_Manager::NUMBER,
			        'dynamic' => ['active' => true],
                    'condition' => ['customize_responsive' => 'yes']
                        + ($extra_fields['customize_responsive']['condition'] ?? [])
                        + ($extra_fields['mobile_slides']['condition'] ?? []),
                    'min' => 1,
                    'max' => ($extra_fields['mobile_slides']['max'] ?? ''),
                ]
            );
        }

        public static function init($atts, $items = [], $templates = false)
        {

            // ↓ Attributes validation
            extract(
                shortcode_atts([
                    // General
                    'slides_transition' => 800,
                    'animation_style' => 'default',
                    'slides_per_row' => 1,
                    'autoplay' => true,
                    'autoplay_speed' => 3000,
                    'linear_animation' => false,
                    'autoplay_pause' => true,
                    'autoplay_reverse' => false,
                    'slide_per_single' => false,
                    'animation_triggered_by_mouse' => false,
                    'slider_infinite' => false,
                    'adaptive_height' => false,
                    'fade_animation' => false,
                    'center_mode' => false,
                    'carousel_appear_animation' => true,
                    'variable_width' => false,
                    'variable_width_height' => '',
                    'extra_class' => '',
                    // Pagination
                    'use_pagination' => true,
                    'pagination_type' => 'circle',
                    'pagination_dynamic' => false,
                    // Navigation
                    'use_navigation' => false,
                    'navigation_position' => 'nearby',
                    // Responsive
                    'customize_responsive' => false,
                    'widescreen_slides' => '',
                    'desktop_slides' => '',
                    'tablet_slides' => '',
                    'mobile_slides' => '',
                    'responsive_gap' => false,
                ], $atts)
            );
            $breakpoints = [
                'widescreen' => $atts['widescreen_breakpoint'] ?? '',
                'desktop' => $atts['desktop_breakpoint'] ?? '',
                'tablet' => $atts['tablet_breakpoint'] ?? '',
                'mobile' => $atts['mobile_breakpoint'] ?? '',
            ];
            // ↑ attributes validation

            if ('default' === $animation_style || 'default_vertical' === $animation_style) {
                if ('default_vertical' === $animation_style || !!$linear_animation){
                    $slide_per_single = 'yes';
                }
                $slides_per_row = (int) $slides_per_row ?? 'auto';
                $slide_per_single = (int) (bool) $slide_per_single;

                $data_array['slidesTransition'] = $slides_transition;
                $data_array['mousewheel'] = (bool) $animation_triggered_by_mouse;
                $data_array['infinite'] = (bool) $slider_infinite;
                $data_array['variableWidth'] = (bool) $variable_width;
                $data_array['autoplay'] = (bool) $autoplay;
                $data_array['autoplaySpeed'] = $autoplay_speed;
                $data_array['linearAnimation'] = (bool) $linear_animation;
                $data_array['autoplayPause'] = (bool) $autoplay_pause;
                $data_array['autoplayReverse'] = (bool) $autoplay_reverse;
	            $data_array['watchOverflow'] = true;
                if ($center_mode) {
                    $data_array['centerMode'] = true;
                    $data_array['centerPadding'] = '0px';
                }
                $data_array['arrows'] = (bool) $use_navigation;
                $data_array['dots'] = (bool) $use_pagination;
                $data_array['dynamicBullets'] = (bool) $pagination_dynamic;
                $data_array['adaptiveHeight'] = (bool) $adaptive_height;
                $data_array['direction'] = 'default_vertical' === $animation_style ? 'vertical' : 'horizontal';

                // ↓ Responsive
                $default_breakpoints = self::get_default_responsive_breakpoints();
                $default_slides = [
                    'desktop' => $slides_per_row,
                    'tablet' => $slides_per_row > 1 ? 2 : 1,
                    'mobile' => 1,
                ];

                $widescreen_breakpoint = $breakpoints['widescreen'] ?: $default_breakpoints['widescreen'];
                $desktop_breakpoint = $breakpoints['desktop'] ?: $default_breakpoints['desktop'];
                $tablet_breakpoint = $breakpoints['tablet'] ?: $default_breakpoints['tablet'];
                $mobile_breakpoint = $breakpoints['mobile'] ?: $default_breakpoints['mobile'];

                $widescreen_slides = $customize_responsive && $widescreen_slides ? (int) $widescreen_slides : $default_slides['desktop'];
                $desktop_slides = $customize_responsive && $desktop_slides ? (int) $desktop_slides : $default_slides['desktop'];
                $tablet_slides = $customize_responsive && $tablet_slides ? (int) $tablet_slides : $default_slides['tablet'];
                $mobile_slides = $customize_responsive && $mobile_slides ? (int) $mobile_slides : $default_slides['mobile'];

                $data_array['responsive'][] = [
                    'breakpoint' => (int) $widescreen_breakpoint,
                    'slidesToShow' => esc_attr($widescreen_slides),
                    'slidesToScroll' => $slide_per_single ?: esc_attr($widescreen_slides),
                ];
                if ($responsive_gap && !empty($responsive_gap['desktop_gap']['size'])) {
                    $gap_lg = (int) esc_attr($responsive_gap['desktop_gap']['size']);
                    $data_array['responsive'][count($data_array['responsive']) - 1]['gap'] = $gap_lg;
                }

                $data_array['responsive'][] = [
                    'breakpoint' => (int) $desktop_breakpoint,
                    'slidesToShow' => esc_attr($desktop_slides),
                    'slidesToScroll' => $slide_per_single ?: esc_attr($desktop_slides),
                ];
                if ($responsive_gap && !empty($responsive_gap['desktop_gap']['size'])) {
                    $gap_lg = (int) esc_attr($responsive_gap['desktop_gap']['size']);
                    $data_array['responsive'][count($data_array['responsive']) - 1]['gap'] = $gap_lg;
                }

                $data_array['responsive'][] = [
                    'breakpoint' => (int) $tablet_breakpoint,
                    'slidesToShow' => esc_attr($tablet_slides),
                    'slidesToScroll' => $slide_per_single ?: esc_attr($tablet_slides),
                ];
                if ($responsive_gap && !empty($responsive_gap['tablet_gap']['size'])) {
                    $gap_md = (int) esc_attr($responsive_gap['tablet_gap']['size']);
                    $data_array['responsive'][count($data_array['responsive']) - 1]['gap'] = $gap_md;
                }

                $data_array['responsive'][] = [
                    'breakpoint' => (int) $mobile_breakpoint,
                    'slidesToShow' => esc_attr($mobile_slides),
                    'slidesToScroll' => $slide_per_single ?: esc_attr($mobile_slides),
                ];
                if ($responsive_gap && !empty($responsive_gap['mobile_gap']['size'])) {
                    $gap_sm = (int) esc_attr($responsive_gap['mobile_gap']['size']);
                    $data_array['responsive'][count($data_array['responsive']) - 1]['gap'] = $gap_sm;
                }
                // ↑ responsive

                $carousel_id = uniqid('wgl_carousel_');

                $data_attribute = " data-swiper='" . json_encode($data_array, true) . "'";
                $data_attribute .= " data-item-carousel='" . $carousel_id . "'";

                // Classes
                $wrapper_classes = $use_navigation && $navigation_position ? ' navigation-position-' . $navigation_position : '';
                $wrapper_classes .= 'default_vertical' === $animation_style ? ' wgl-swiper-vertical' : '';

                $carousel_classes = $use_pagination ? ' pagination_' . $pagination_type : '';
                $carousel_classes .= $carousel_appear_animation ? ' appear-animation' : '';
                $carousel_classes .= $center_mode ? ' center-mode' : '';
                $carousel_classes .= $slider_infinite ? ' loop-mode' : '';
                $carousel_classes .= $animation_triggered_by_mouse ? ' animated-by-mouse-wheel' : '';
                $carousel_classes .= $variable_width ? ' variable-width' : '';
                $carousel_classes .= $fade_animation ? ' fade_swiper' : '';
                $carousel_classes .= ' ' . $extra_class;

                if ($carousel_appear_animation) {
                    wp_enqueue_script('jquery-appear', get_template_directory_uri() . '/js/jquery.appear.js');
                }
                // Render
                $output = '<div class="wgl-carousel_wrapper' . esc_attr($wrapper_classes) . '">';
                    $output .= '<div class="wgl-carousel swiper wgl-carousel_swiper swiper-container' . esc_attr($carousel_classes) . '"' . $data_attribute . '>';
                        $output .= '<div class="swiper-wrapper">';

                            if (!empty($templates)) {
                                if (!empty($items)) {
                                    ob_start();
                                    foreach ($items as $id) if ($id) {
                                        echo '<div class="item swiper-slide">',
                                            (new Frontend())->get_builder_content_for_display($id, false),
                                        '</div>';
                                    }
                                    $output .= ob_get_clean();
                                }
                            } else {
                                $output .= $items;
                            }

                        $output .= '</div>';

                    $output .= '</div>';

                    if ($use_pagination) {
                        $pag_classes = $use_pagination ? ' pagination_' . $pagination_type : '';
                        $output .= '<div class="wgl-swiper-pagination-wrapper'.$pag_classes.'"><ul class="swiper-pagination" role="tablist" data-carousel="' . $carousel_id . '"></ul></div>';
                    }

                    if ($use_navigation) {
                        $output .= '<div class="wgl-navigation_wrapper">';
                            $output .= '<button class="elementor-swiper-button elementor-swiper-button-prev" data-carousel="' . $carousel_id . '"><span class="title">'.esc_html__('PREV', 'wuko-core').'</span><i class="wgl-svg-icon">'.wgl_dynamic_styles()->wgl_theme_svg()['arrow-right'].'</i></button>';
                            $output .= '<button class="elementor-swiper-button elementor-swiper-button-next" data-carousel="' . $carousel_id . '"><span class="title">'.esc_html__('NEXT', 'wuko-core').'</span><i class="wgl-svg-icon">'.wgl_dynamic_styles()->wgl_theme_svg()['arrow-right'].'</i></button>';
                        $output .= '</div>';
                    }

                $output .= '</div>';

            } else {

                // Classes
                $wrapper_classes  = $use_navigation && $navigation_position ? ' navigation-position-' . $navigation_position : '';

                $carousel_classes  = ' animation-style-3d';
                $carousel_classes .= ' animation-direction-' . $animation_style;
                $carousel_classes .= $animation_triggered_by_mouse ? ' animated-by-mouse-wheel' : '';
                $carousel_classes .= $extra_class;

                // Render
                $output = '<div class="wgl-carousel_wrapper' . esc_attr($wrapper_classes) . '">';
                    $output .= '<div class="wgl-carousel' . esc_attr($carousel_classes) . '">';
                        $output .= '<div class="wgl-carousel_wrap">';
                        if (!empty($templates)) {
                            if (!empty($items)) {
                                ob_start();
                                foreach ($items as $id) if ($id) {
                                    echo '<div class="wgl-item">',
                                        (new Frontend())->get_builder_content_for_display($id, false),
                                    '</div>';
                                }
                                $output .= ob_get_clean();
                            }
                        } else {
                            $output .= $items;
                        }
                        $output .= '</div>';

                        if ($use_navigation) {
                            $output .= '<div class="wgl-navigation_wrapper">';
                                $output .= '<button class="motion-prev motion-arrow" type="button"><i class="wgl-svg-icon">'.wgl_dynamic_styles()->wgl_theme_svg()['arrow-right'].'</i></button>';
                                $output .= '<button class="motion-next motion-arrow" type="button"><i class="wgl-svg-icon">'.wgl_dynamic_styles()->wgl_theme_svg()['arrow-right'].'</i></button>';
                            $output .= '</div>';
                        }

                    $output .= '</div>';
                $output .= '</div>';
            }

            return $output;
        }

        public static function get_default_responsive_breakpoints()
        {
            $elementor_container_width = (int) wgl_dynamic_styles()->get_elementor_container_width();

            return [
                'widescreen' => 1601,
                'desktop' => $elementor_container_width ? $elementor_container_width + 1 : 1201,
                'tablet' => 768,
                'mobile' => 280,
            ];
        }

        public static function get_instance()
        {
            if (is_null(self::$instance)) {
                self::$instance = new self();
            }

            return self::$instance;
        }
    }

    new WGL_Carousel_Settings();
}
Name	Size	Permission
carousel_settings.php	92389 bytes	0644
cursor_settings.php	32705 bytes	0644
icons_settings.php	15781 bytes	0644
wgl_fluid_settings.php	22161 bytes	0644
File Content: carousel_settings.php

File Content: `carousel_settings.php`
