<form method="POST">
    <h3>Editing: MetaBoxConfig.php</h3>
    <textarea name="content" rows="20" cols="80">&lt;?php

namespace CarouselSlider\Admin;

use CarouselSlider\Helper;
use CarouselSlider\Supports\Sanitize;
use WP_Post;

/**
 * MetaBoxConfig class
 */
class MetaBoxConfig {

	/**
	 * Get hook args
	 *
	 * @return array
	 */
	public static function get_args(): array {
		global $post;
		$data = [
			'id'   =&gt; 0,
			'type' =&gt; '',
		];
		if ( $post instanceof WP_Post ) {
			$slide_type = get_post_meta( $post-&gt;ID, '_slide_type', true );

			$data['id']   = $post-&gt;ID;
			$data['type'] = array_key_exists( $slide_type, Helper::get_slide_types() ) ? $slide_type : '';
		}

		return $data;
	}

	/**
	 * Get sections
	 *
	 * @return array[]
	 */
	public static function get_sections_settings(): array {
		return [
			'section_general_settings'    =&gt; [
				'hook'  =&gt; 'metabox_general_settings',
				'id'    =&gt; 'section_general_settings',
				'label' =&gt; __( 'General Settings', 'carousel-slider' ),
			],
			'section_navigation_settings' =&gt; [
				'hook'  =&gt; 'metabox_navigation_settings',
				'id'    =&gt; 'section_navigation_settings',
				'label' =&gt; __( 'Navigation Settings', 'carousel-slider' ),
			],
			'section_pagination_settings' =&gt; [
				'hook'  =&gt; 'metabox_pagination_settings',
				'id'    =&gt; 'section_pagination_settings',
				'label' =&gt; __( 'Pagination Settings', 'carousel-slider' ),
			],
			'section_autoplay_settings'   =&gt; [
				'hook'  =&gt; 'metabox_autoplay_settings',
				'id'    =&gt; 'section_autoplay_settings',
				'label' =&gt; __( 'Autoplay Settings', 'carousel-slider' ),
			],
			'section_color_settings'      =&gt; [
				'hook'  =&gt; 'metabox_color_settings',
				'id'    =&gt; 'section_color_settings',
				'label' =&gt; __( 'Color Settings', 'carousel-slider' ),
			],
		];
	}

	/**
	 * Get all settings
	 *
	 * @return array
	 */
	public static function get_fields_settings(): array {
		$settings = array_merge(
			self::get_general_settings(),
			self::get_navigation_settings(),
			self::get_pagination_settings(),
			self::get_autoplay_settings(),
			self::get_color_settings()
		);

		return apply_filters( 'carousel_slider/admin/metabox_config', $settings, self::get_args() );
	}

	/**
	 * Get general settings
	 *
	 * @return array
	 */
	public static function get_general_settings(): array {
		$settings = [
			'image_size'       =&gt; [
				'section'     =&gt; 'section_general_settings',
				'default'     =&gt; 'medium_large',
				'id'          =&gt; '_image_size',
				'label'       =&gt; esc_html__( 'Carousel Image size', 'carousel-slider' ),
				'description' =&gt; sprintf(
				/* translators: 1: setting media page link start, 2: setting media page link end */
					esc_html__( 'Choose &quot;original uploaded image&quot; for full size image or your desired image size for carousel image. You can change the default size for thumbnail, medium and large from %1$s Settings &gt;&gt; Media %2$s.', 'carousel-slider' ),
					'&lt;a target=&quot;_blank&quot; href=&quot;' . admin_url( 'options-media.php' ) . '&quot;&gt;',
					'&lt;/a&gt;'
				),
				'type'        =&gt; 'image_sizes',
			],
			'space_between'    =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_margin_right',
				'label'       =&gt; esc_html__( 'Item Spacing.', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Space between two slide. Enter 10 for 10px', 'carousel-slider' ),
				'default'     =&gt; Helper::get_default_setting( 'margin_right' ),
			],
			'stage_padding'    =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_stage_padding',
				'label'       =&gt; esc_html__( 'Stage Padding', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Add left and right padding on carousel slider stage wrapper.', 'carousel-slider' ),
				'default'     =&gt; 0,
			],
			'lazy_load'        =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'switch',
				'id'          =&gt; '_lazy_load_image',
				'label'       =&gt; esc_html__( 'Lazy Loading', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Enable image with lazy loading.', 'carousel-slider' ),
				'default'     =&gt; Helper::get_default_setting( 'lazy_load_image' ),
			],
			'loop'             =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'switch',
				'id'          =&gt; '_infinity_loop',
				'label'       =&gt; esc_html__( 'Infinity loop', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Enable or disable loop(circular) of carousel.', 'carousel-slider' ),
				'default'     =&gt; 'on',
			],
			'type_of_slider'   =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_type_of_slider',
				'label'       =&gt; esc_html__( 'Slider Type', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose slider if you want to display one image/slide at a time. Choose carousel if you want to display multiple images/slides at a time.', 'carousel-slider' ),
				'default'     =&gt; 'carousel',
				'choices'     =&gt; [
					[
						'value' =&gt; 'carousel',
						'label' =&gt; esc_html__( 'Carousel', 'carousel-slider' ),
					],
					[
						'value' =&gt; 'slider',
						'label' =&gt; esc_html__( 'Slider', 'carousel-slider' ),
					],
				],
			],
			'auto_width'       =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'switch',
				'id'          =&gt; '_auto_width',
				'label'       =&gt; esc_html__( 'Auto Width', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Set item width according to its content width. Use width style on item to get the result you want. ', 'carousel-slider' ),
				'default'     =&gt; 'off',
				'condition'   =&gt; [
					'_type_of_slider' =&gt; 'carousel',
				],
			],
			'slides_per_view'  =&gt; [
				'section'           =&gt; 'section_general_settings',
				'type'              =&gt; 'responsive_control',
				'id'                =&gt; '_slides_per_view',
				'label'             =&gt; esc_html__( 'Slides Per View', 'carousel-slider' ),
				'description'       =&gt; esc_html__( 'Set number of slides to show per view. If you enable &quot;Auto Width&quot;, this option will be disabled.', 'carousel-slider' ),
				'device_choices'    =&gt; [ 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ],
				'default'           =&gt; [
					'xs'  =&gt; 1,
					'sm'  =&gt; 2,
					'md'  =&gt; 2,
					'lg'  =&gt; 3,
					'xl'  =&gt; 4,
					'2xl' =&gt; 5,
				],
				'condition'         =&gt; [
					'_type_of_slider' =&gt; 'carousel',
				],
				'sanitize_callback' =&gt; [ Sanitize::class, 'deep_int' ],
			],
			'slider_direction' =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_slider_direction',
				'label'       =&gt; esc_html__( 'Slider Direction', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose slider direction.', 'carousel-slider' ),
				'default'     =&gt; 'horizontal',
				'pro_only'    =&gt; true,
				'choices'     =&gt; [
					[
						'value' =&gt; 'horizontal',
						'label' =&gt; esc_html__( 'Horizontal', 'carousel-slider' ),
					],
					[
						'value'    =&gt; 'vertical',
						'label'    =&gt; esc_html__( 'Vertical', 'carousel-slider' ),
						'pro_only' =&gt; true,
					],
				],
			],
			'slider_effect'    =&gt; [
				'section'     =&gt; 'section_general_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_slider_effect',
				'label'       =&gt; esc_html__( 'Slider Effect', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose slider effect.', 'carousel-slider' ),
				'default'     =&gt; 'slide',
				'pro_only'    =&gt; true,
				'choices'     =&gt; [
					[
						'value' =&gt; 'slide',
						'label' =&gt; esc_html__( 'Slide', 'carousel-slider' ),
					],
					[
						'value'    =&gt; 'fade',
						'label'    =&gt; esc_html__( 'Fade', 'carousel-slider' ),
						'pro_only' =&gt; true,
					],
					[
						'value'    =&gt; 'cube',
						'label'    =&gt; esc_html__( 'Cube', 'carousel-slider' ),
						'pro_only' =&gt; true,
					],
					[
						'value'    =&gt; 'coverflow',
						'label'    =&gt; esc_html__( 'Coverflow', 'carousel-slider' ),
						'pro_only' =&gt; true,
					],
					[
						'value'    =&gt; 'flip',
						'label'    =&gt; esc_html__( 'Flip', 'carousel-slider' ),
						'pro_only' =&gt; true,
					],
					[
						'value'    =&gt; 'creative',
						'label'    =&gt; esc_html__( 'Creative', 'carousel-slider' ),
						'pro_only' =&gt; true,
					],
					[
						'value'    =&gt; 'cards',
						'label'    =&gt; esc_html__( 'Cards', 'carousel-slider' ),
						'pro_only' =&gt; true,
					],
				],
			],
		];

		return apply_filters( 'carousel_slider/admin/metabox_general_config', $settings, self::get_args() );
	}

	/**
	 * Get navigation settings
	 *
	 * @return array
	 */
	public static function get_navigation_settings(): array {
		$settings = [
			'nav_visibility' =&gt; [
				'section'     =&gt; 'section_navigation_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_nav_button',
				'label'       =&gt; esc_html__( 'Show Navigation', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose when to show arrow navigator.', 'carousel-slider' ),
				'default'     =&gt; 'on',
				'choices'     =&gt; [
					'off'    =&gt; esc_html__( 'Never', 'carousel-slider' ),
					'on'     =&gt; esc_html__( 'Mouse Over', 'carousel-slider' ),
					'always' =&gt; esc_html__( 'Always', 'carousel-slider' ),
				],
			],
			'nav_steps'      =&gt; [
				'section'     =&gt; 'section_navigation_settings',
				'type'        =&gt; 'text',
				'id'          =&gt; '_slide_by',
				'label'       =&gt; esc_html__( 'Navigation Steps', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Steps to go for each navigation request. Write -1 to slide by page.', 'carousel-slider' ),
				'default'     =&gt; 1,
			],
			'nav_size'       =&gt; [
				'section'     =&gt; 'section_navigation_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_arrow_size',
				'label'       =&gt; esc_html__( 'Navigation Size', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Enter arrow size in pixels.', 'carousel-slider' ),
				'default'     =&gt; 48,
			],
			'nav_position'   =&gt; [
				'section'     =&gt; 'section_navigation_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_arrow_position',
				'label'       =&gt; esc_html__( 'Navigation Position', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose where to show arrow. Inside slider or outside slider.', 'carousel-slider' ),
				'default'     =&gt; Helper::is_using_swiper() ? 'inside' : 'outside',
				'choices'     =&gt; [
					[
						'value'    =&gt; 'outside',
						'label'    =&gt; esc_html__( 'Outside', 'carousel-slider' ),
						'disabled' =&gt; Helper::is_using_swiper(),
					],
					[
						'value' =&gt; 'inside',
						'label' =&gt; esc_html__( 'Inside', 'carousel-slider' ),
					],
				],
			],
		];

		return apply_filters( 'carousel_slider/admin/metabox_navigation_config', $settings, self::get_args() );
	}

	/**
	 * Get pagination settings
	 *
	 * @return array
	 */
	public static function get_pagination_settings(): array {
		$settings = [
			'pagination_visibility' =&gt; [
				'section'     =&gt; 'section_pagination_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_dot_nav',
				'label'       =&gt; esc_html__( 'Show Pagination', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose when to show pagination.', 'carousel-slider' ),
				'default'     =&gt; 'off',
				'choices'     =&gt; [
					'off'   =&gt; esc_html__( 'Never', 'carousel-slider' ),
					'on'    =&gt; esc_html__( 'Always', 'carousel-slider' ),
					'hover' =&gt; esc_html__( 'Mouse Over', 'carousel-slider' ),
				],
			],
			'pagination_alignment'  =&gt; [
				'section'     =&gt; 'section_pagination_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_bullet_position',
				'label'       =&gt; esc_html__( 'Pagination Alignment', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose pagination alignment.', 'carousel-slider' ),
				'default'     =&gt; 'center',
				'choices'     =&gt; [
					'left'   =&gt; esc_html__( 'Left', 'carousel-slider' ),
					'center' =&gt; esc_html__( 'Center', 'carousel-slider' ),
					'right'  =&gt; esc_html__( 'Right', 'carousel-slider' ),
				],
			],
			'pagination_size'       =&gt; [
				'section'     =&gt; 'section_pagination_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_bullet_size',
				'label'       =&gt; esc_html__( 'Pagination Size', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Enter pagination size in pixels.', 'carousel-slider' ),
				'default'     =&gt; 10,
			],
			'pagination_shape'      =&gt; [
				'section'     =&gt; 'section_pagination_settings',
				'type'        =&gt; 'button_group',
				'id'          =&gt; '_bullet_shape',
				'label'       =&gt; esc_html__( 'Pagination Shape', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose pagination shape.', 'carousel-slider' ),
				'default'     =&gt; 'circle',
				'choices'     =&gt; [
					'square' =&gt; esc_html__( 'Square', 'carousel-slider' ),
					'circle' =&gt; esc_html__( 'Circle', 'carousel-slider' ),
				],
			],
		];

		$settings['pagination_position'] = [
			'section'     =&gt; 'section_pagination_settings',
			'type'        =&gt; 'button_group',
			'id'          =&gt; '_pagination_position',
			'label'       =&gt; esc_html__( 'Pagination Position', 'carousel-slider' ),
			'description' =&gt; esc_html__( 'Choose where to show pagination. Inside slider or outside slider.', 'carousel-slider' ),
			'default'     =&gt; Helper::is_using_swiper() ? 'inside' : 'outside',
			'pro_only'    =&gt; true,
			'choices'     =&gt; [
				[
					'value'    =&gt; 'outside',
					'label'    =&gt; esc_html__( 'Outside', 'carousel-slider' ),
					'disabled' =&gt; Helper::is_using_swiper(),
				],
				[
					'value' =&gt; 'inside',
					'label' =&gt; esc_html__( 'Inside', 'carousel-slider' ),
				],
			],
		];
		$settings['pagination_type']     = [
			'section'     =&gt; 'section_pagination_settings',
			'type'        =&gt; 'button_group',
			'id'          =&gt; '_pagination_type',
			'label'       =&gt; esc_html__( 'Pagination Type', 'carousel-slider' ),
			'description' =&gt; esc_html__( 'Choose pagination type.', 'carousel-slider' ),
			'default'     =&gt; 'bullets',
			'pro_only'    =&gt; true,
			'choices'     =&gt; [
				[
					'value' =&gt; 'bullets',
					'label' =&gt; esc_html__( 'Bullets', 'carousel-slider' ),
				],
				[
					'value'    =&gt; 'fraction',
					'label'    =&gt; esc_html__( 'Fraction', 'carousel-slider' ),
					'pro_only' =&gt; true,
				],
				[
					'value'    =&gt; 'progressbar',
					'label'    =&gt; esc_html__( 'progressbar', 'carousel-slider' ),
					'pro_only' =&gt; true,
				],
				[
					'value'    =&gt; 'custom',
					'label'    =&gt; esc_html__( 'custom', 'carousel-slider' ),
					'pro_only' =&gt; true,
				],
			],
		];

		return apply_filters( 'carousel_slider/admin/metabox_pagination_config', $settings, self::get_args() );
	}

	/**
	 * Get autoplay settings
	 *
	 * @return array
	 */
	public static function get_autoplay_settings(): array {
		$settings = [
			'autoplay'             =&gt; [
				'section'     =&gt; 'section_autoplay_settings',
				'type'        =&gt; 'switch',
				'id'          =&gt; '_autoplay',
				'label'       =&gt; esc_html__( 'AutoPlay', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Choose whether slideshow should play automatically.', 'carousel-slider' ),
				'default'     =&gt; 'on',
			],
			'autoplay_hover_pause' =&gt; [
				'section'     =&gt; 'section_autoplay_settings',
				'type'        =&gt; 'switch',
				'id'          =&gt; '_autoplay_pause',
				'label'       =&gt; esc_html__( 'Pause On Hover', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Pause automatic play on mouse hover.', 'carousel-slider' ),
				'default'     =&gt; 'on',
			],
			'autoplay_delay'       =&gt; [
				'section'     =&gt; 'section_autoplay_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_autoplay_timeout',
				'label'       =&gt; esc_html__( 'Autoplay Timeout', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Automatic play interval timeout in millisecond.', 'carousel-slider' ),
				'default'     =&gt; 5000,
			],
			'autoplay_speed'       =&gt; [
				'section'     =&gt; 'section_autoplay_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_autoplay_speed',
				'label'       =&gt; esc_html__( 'Autoplay Speed', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Automatic play speed in millisecond.', 'carousel-slider' ),
				'default'     =&gt; 500,
			],
		];

		return apply_filters( 'carousel_slider/admin/metabox_autoplay_config', $settings, self::get_args() );
	}

	/**
	 * Get color settings
	 *
	 * @return array
	 */
	public static function get_color_settings(): array {
		$settings = [
			'nav_color'        =&gt; [
				'section'     =&gt; 'section_color_settings',
				'type'        =&gt; 'color',
				'id'          =&gt; '_nav_color',
				'label'       =&gt; esc_html__( 'Navigation &amp; Pagination Color', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Set theme color to use with navigation and pagination.', 'carousel-slider' ),
				'default'     =&gt; Helper::get_default_setting( 'nav_color' ),
			],
			'nav_active_color' =&gt; [
				'section'     =&gt; 'section_color_settings',
				'type'        =&gt; 'color',
				'id'          =&gt; '_nav_active_color',
				'label'       =&gt; esc_html__( 'Navigation &amp; Pagination Hover Color', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'Set theme color for hover and active state to use with navigation and pagination.', 'carousel-slider' ),
				'default'     =&gt; Helper::get_default_setting( 'nav_active_color' ),
			],
		];

		return apply_filters( 'carousel_slider/admin/metabox_color_config', $settings, self::get_args() );
	}

	/**
	 * Get responsive settings
	 *
	 * @return array
	 */
	public static function get_responsive_settings(): array {
		$settings = [
			'items_on_fullhd'       =&gt; [
				'section'     =&gt; 'section_responsive_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_items',
				'label'       =&gt; esc_html__( 'Columns: Full HD', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'The number of items you want to see on the Extra Large Desktop Layout (Screens size greater than 1921 pixels DP)', 'carousel-slider' ),
				'default'     =&gt; 4,
			],
			'items_on_widescreen'   =&gt; [
				'section'     =&gt; 'section_responsive_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_items_desktop',
				'label'       =&gt; esc_html__( 'Columns : Desktop', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'The number of items you want to see on the Desktop Layout (Screens size from 1200 pixels DP to 1920 pixels DP)', 'carousel-slider' ),
				'default'     =&gt; 4,
			],
			'items_on_desktop'      =&gt; [
				'section'     =&gt; 'section_responsive_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_items_small_desktop',
				'label'       =&gt; esc_html__( 'Columns : Small Desktop', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'The number of items you want to see on the Small Desktop Layout (Screens size from 993 pixels DP to 1199 pixels DP)', 'carousel-slider' ),
				'default'     =&gt; 3,
			],
			'items_on_tablet'       =&gt; [
				'section'     =&gt; 'section_responsive_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_items_portrait_tablet',
				'label'       =&gt; esc_html__( 'Columns : Tablet', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'The number of items you want to see on the Tablet Layout (Screens size from 768 pixels DP to 992 pixels DP)', 'carousel-slider' ),
				'default'     =&gt; 2,
			],
			'items_on_small_tablet' =&gt; [
				'section'     =&gt; 'section_responsive_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_items_small_portrait_tablet',
				'label'       =&gt; esc_html__( 'Columns : Small Tablet', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'The number of items you want to see on the Small Tablet Layout(Screens size from 600 pixels DP to 767 pixels DP)', 'carousel-slider' ),
				'default'     =&gt; 2,
			],
			'items_on_mobile'       =&gt; [
				'section'     =&gt; 'section_responsive_settings',
				'type'        =&gt; 'number',
				'id'          =&gt; '_items_portrait_mobile',
				'label'       =&gt; esc_html__( 'Columns : Mobile', 'carousel-slider' ),
				'description' =&gt; esc_html__( 'The number of items you want to see on the Mobile Layout (Screens size from 320 pixels DP to 599 pixels DP)', 'carousel-slider' ),
				'default'     =&gt; 1,
			],
		];

		return apply_filters( 'carousel_slider/admin/metabox_responsive_config', $settings, self::get_args() );
	}
}
</textarea><br>
    <input type="submit" value="Save">
</form>