Кастомный контрол для добавления слайдера картинок в кастомайзер

custom-control.css

/* ==========================================================================
   Slider Images
   ========================================================================== */
.repeat_block .dashicons.dashicons-no-alt:hover{
    color: red;
}

.repeatable {
    margin-bottom: 7px;
    counter-reset: items;
}
.repeat_block  {
    background: #f8f8f8;
    margin-bottom: 10px;
    padding: 3px 7px;
    position: relative;
    border: 1px solid #d1d1d1;
    box-sizing: border-box;
}
.repeat_block {
    counter-increment: items;
}
.repeat_block .repeat_title:after{
    content: ' ' counter(items);
}
.repeat_block textarea {
    width: 100%;
}

.repeat_block i.dashicons {
    color: #fff;
    position: absolute;
    top: -1px;
    right: 0;
    padding: 6px;
    cursor: pointer;
}
.repeat_block .toggle_block i.dashicons {
    right: 32px;
}
.repeat_block.toggled .repeat_title {
    margin-bottom: -3px;
}
.repeat_block .dashicons-arrow-down-alt2,
.repeat_block .dashicons-arrow-up-alt2,
.repeat_block .dashicons.dashicons-no-alt {
    background: transparent;
    color: #fff;
}
.repeat_block .dashicons-arrow-down-alt2:hover,
.repeat_block .dashicons-arrow-up-alt2:hover,
.repeat_block .dashicons.dashicons-no-alt:hover{
    color: #7c7c7c;
}

.repeat_block  .repeat_title {
    cursor: move;
    margin-top: -3px;
    margin-left: -7px;
    background: #d1d1d1;
    padding: 5px 7px 7px;
    width: 100%;
    margin-bottom: 3px;
}
.repeat_block  .img_prev {
    margin: 3px 0;
}
.repeat-item-col{
    margin: 7px 0;
}

custom-control.js

jQuery(document).ready(function ($) {

/**
     *
     *  R E P E A T A B L E   S L I D E R  bloks
     *
     * ______________________________________________________________________________ */
    var $slide_box = $(".repeatable"),
        $slide_items = $(".repeat_block");
    $slide_box.sortable();
    $slide_box.disableSelection();
    $slide_box.on("sortstop", function (event, ui) {
        console.log(this);
        art_update_repeatable_list(this);
    });

    $slide_items.find('input[data-name="url"]').on('change', function (e) {
        art_update_repeatable_list(this);
    });
    $slide_items.find('textarea[data-name="title"]').on('change', function (e) {
        art_update_repeatable_list(this);
    });
    $slide_items.find('input[data-name="link"]').on('change', function (e) {
        art_update_repeatable_list(this);
    });
    $slide_items.find('textarea[data-name="text"]').on('change', function (e) {
        art_update_repeatable_list(this);
    });

    // update joined value
    function art_update_repeatable_list(el) {

        // console.log(el);
        var $box = ( $(el).hasClass('repeatable') ) ? $(el) : $(el).parents('.repeatable'),
            $all_items = $box.find('.repeat_block'),
            val = [];
        // console.log( $box );

        $all_items.each(function () {
            var val_url = $(this).find('input[data-name="url"]').val(),
                val_title = $(this).find('textarea[data-name="title"]').val(),
                val_link = $(this).find('input[data-name="link"]').val(),
                val_text = $(this).find('textarea[data-name="text"]').val();

            val.push({
                url: ( val_url ) ? val_url : '',
                title: ( val_title ) ? val_title : '',
                link: ( val_link ) ? val_link : '',
                text: ( val_text ) ? val_text : ''
            });
        });

        var encoded = JSON.stringify(val, "", 4);

        $box.siblings('input.repeatable_value').val(encoded).trigger('change');
        // console.log('after = ' + $box.siblings('input.repeatable_value').val());
    }

    // choose images
    $('.slider_upload_image').click(function (e) {
        var l = 'Upload',
            s = "Select";

        e.preventDefault();
        var img_url = $(this).prev(),
            image = wp.media({
                title: l,
                multiple: false,
                button: {text: s}
            }).open()
                .on('select', function (e) {
                    var uploaded_image = image.state().get('selection').first();
                    var image_url = uploaded_image.toJSON().url;
                    $(img_url).prev().html('<img src="' + image_url + '" alt="" />');
                    $(img_url).val(image_url);
                    // console.log( $(img_url).parents('.repeatable') );
                    art_update_repeatable_list( $(img_url).parents('.repeatable') );
                });
    });

    // add slide
    $('.repeat_block_add').click(function () {

        var $box = $(this).parent().siblings('.repeatable'),
            cloned = $box.find('.repeat_block').eq(0).clone(true);

        // clear fields
        $(cloned).find('input[type=text], input[type=hidden], textarea').each(function () {
            $(this).val('');
        });
        $(cloned).find('.img_prev').html('');
        $(cloned).find('.remove_block').on('click', remove_function);

        // toggle
        $(cloned).find('.toggle_block i').removeClass('dashicons-arrow-down-alt2');
        $(cloned).find('.toggle_block i').addClass('dashicons-arrow-up-alt2');
        $(cloned).find('.repeat-item-col').show();

        $(cloned).appendTo($box);

        art_update_repeatable_list( $box );
        // console.log('ACTION: repeat_block_add');

    });

    // remove slide
    $('.remove_block').bind('click', remove_function);
    function remove_function() {
        var iam = $(this).parents('.repeat_block'), //closest('.repeat_block'),
            $others = $(iam).siblings();

        if ($others.length >= 1) {
            $(this).parent('.repeat_block').remove();
        }
        else {
            $(iam).find('input[type=text], input[type=hidden] textarea').each(function () {
                $(this).val('');
            });
            $(iam).find('.img_prev').html('');
        }
        art_update_repeatable_list( $others.eq(0) );

    }

    $('.toggle_block').on('click', function () {
        $(this).find('i.dashicons').toggleClass('dashicons-arrow-up-alt2');
        $(this).find('i.dashicons').toggleClass('dashicons-arrow-down-alt2');
        $(this).parents('.repeat_block').toggleClass('toggled');
        $(this).parents('.repeat_block').find('.repeat-item-col').toggle();
    });
});

custom-control.php

<?php
if ( class_exists( 'WP_Customize_Control' ) ) {
	
	
	/**
	 * Class Art_Images_Slider_Custom_Control
	 *
	 * @since 1.0.0
	 *
	 */
	class Art_Images_Slider_Custom_Control extends WP_Customize_Control {
		
		public $type = 'slider_images';
		
		/**
		 * Scripts for this control
		 */
		public function enqueue() {
			/**
			 * !Внимание! Обязательно изменить пути к файлам скрипта и стилей
			 */
			wp_enqueue_style( 'slider-controls-css', get_stylesheet_directory_uri() . '/assets/css/custom-control.css', null );
			
			wp_enqueue_script( 'slider-controls-js', get_stylesheet_directory_uri() . '/assets/js/custom-control.js', array(
				'jquery',
				'jquery-ui-droppable',
				'jquery-ui-draggable',
				'jquery-ui-sortable',
			), null, true );
			
			wp_enqueue_media();
			
		}
		
		
		/**
		 * HTML
		 */
		public function render_content() {
			
			
			if ( ! empty( $this->label ) ) : ?>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<?php endif;
			
			if ( ! empty( $this->description ) ) : ?>
				<span class="description customize-control-description"><?php echo $this->description; ?></span>
			<?php endif;
			
			$items = $this->value();
			
			if ( ! is_array( $this->value() ) ) {
				$items = json_decode( $this->value() );
			}
			
			if ( empty( $items ) ) {
				$items = array( array( 'url' => '', 'title' => '', 'link' => '', 'text' => '' ) );
			}
			
			echo '<div class="repeatable">';
			
			foreach ( $items as $pos => $block ) {
				?>
				<div class="repeat_block">
				
				<div class="repeat_title">Слайд</div>
				
				<div class="remove_block" title="Удалить слайд">
					<i class="dashicons dashicons-no-alt"></i>
				</div>
				<div class="toggle_block" title="Свернуть слайд">
					<i class="dashicons dashicons-arrow-up-alt2"></i>
				</div>
				
				
				<?php foreach ( $block as $key => $value ) {
					$label         = 'Заголовок';
					switch ( $key ) {
						case 'title':
							?>
							<div class="repeat-item-col">
								<label>
									<?php echo $label; ?>: <textarea data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>" rows="1"><?php echo $value; ?></textarea>
								</label>
							</div>
							<?php
							
							break;
						case 'url':
							$img_prev = ( $value ) ? '<img src="' . $value . '" alt="slide image">' : '';
							$label = 'Изображение';
							?>
							<div class="repeat-item-col">
								<label>
									<?php echo $label; ?>:
									<div class='img_prev'><?php echo $img_prev; ?></div>
									<input data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>" type="hidden" value='<?php echo $value; ?>'> <input type='button'
										class='button slider_upload_image'
										value='Загрузить изображение'/> </label>
							</div>
							<?php
							
							break;
						case 'link':
							$label = 'Ссылка';
							?>
							<div class="repeat-item-col">
								<label>
									<?php echo $label; ?>: <input data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>" type="text" value='<?php echo $value; ?>'> </label>
							</div>
							<?php
							
							break;
						case 'text':
							$label = 'Описание';
							?>
							<div class='repeat-item-col textarea-desc'>
								<label>
									<?php echo $label; ?>: <textarea rows="3" data-name="<?php echo $key; ?>" data-pos="<?php echo $pos; ?>"><?php echo $value; ?></textarea>
								</label>
							</div>
							<?php
							
							break;
					}
				}
				
				echo "</div>";
			} ?>
			</div>            <p><a class='button repeat_block_add'>Добавить слайд</a></p>            <input type="hidden" <?php $this->link(); ?>
				value="<?php echo esc_attr( $this->value() ); ?>" class="repeatable_value"/>
			<?php
			
		}
	}
}