Slider support customizer.

slider-customizer.js

/**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */

( function( $ ) {

	var api = wp.customize;
	api.bind( 'preview-ready', function() {
		"use strict";
		api.selectiveRefresh.bind( 'partial-content-rendered', function( partical ) {

			if( partical.addedContent ) {
				partical.container.show();
			}
			else  {
				partical.container.hide();
			}

			window.slide.update();
			window.slide.slideTo(0);
		} )
	});


} )( jQuery );

slider-customizer.php

<?php
function hoge_slider_customize_register( WP_Customize_Manager $wp_customize ) {

	$wp_customize->add_panel( 'slides', array(
		'title' => __( 'Slides' ),
	) );
	foreach ( range( 0, 2 ) as $index ) {
		$wp_customize->add_section( 'slide_' . $index, array(
			'title' => sprintf( __( 'Slide %s' ), $index ),
			'panel' => 'slides',
		) );

		$wp_customize->add_setting( 'slide_' . $index, array(
			'default'   => get_parent_theme_file_uri( '/images/image-' . $index . '.jpg' ),
			'transport' => 'postMessage',
		) );

		$control = new WP_Customize_Image_Control( $wp_customize, 'slide_' . $index, array(
				'label'          => __( 'Upload an Image' ),
				'allow_addition' => true,
				'section'        => 'slide_' . $index,
				'width'          => 1920,
				'height'         => 1080,
			)
		);
		$wp_customize->add_control( $control );

		$wp_customize->selective_refresh->add_partial( 'slide_' . $index, array(
			'selector'            => '#slide_' . $index,
			'container_inclusive' => false,
			'render_callback'     => function ( WP_Customize_Partial $partial ) use ( $index ) {
				$value = get_theme_mod( $partial->id );
				if ( $value ) {
					echo '<img src="' . $value . '">';
				} else {
					echo '';
				}
			},
			'fallback_refresh'    => false,
		) );

		$wp_customize->selective_refresh->add_dynamic_partials( array( 'slide_' . $index ) );
	}

}

add_action( 'customize_register', 'hoge_slider_customize_register' );


function hoge_slider_scripts() {

	wp_enqueue_style( 'hoge-swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css' );
	wp_enqueue_script( 'hoge-swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js', array( 'jquery' ), '3.4.2', true );
	wp_enqueue_script( 'hoge-slider', get_template_directory_uri() . '/js/slider.js', array( 'hoge-swiper' ), false, true );
}

add_action( 'wp_enqueue_scripts', 'hoge_slider_scripts' );

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function hoge_slider_customize_preview_js() {
	wp_enqueue_script( 'hoge-customizer', get_template_directory_uri() . '/js/slider-customizer.js', array(
		'customize-preview',
		'hoge-slider'
	), false, true );
}

add_action( 'customize_preview_init', 'hoge_slider_customize_preview_js' );

slider.js

(function( $ ) {


	$(function(  ) {

		$('.swiper-slide').each( function(  ) {
			if ( $(this).find('img').length == 0 ) {
				$(this).hide()
			}
		})

		window.slide = new Swiper( '.swiper-container', {
			pagination: '.swiper-pagination',
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			simulateTouch: false,
			slidesPerView: 'auto',
			centeredSlides: true,
		} );


	})
})( jQuery );

slider.php

<!-- Swiper -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<?php foreach ( range( 0, 2 ) as $index ): ?>
				<?php $images = get_theme_mod( 'slide_' . $index ); ?>

				<?php if ( $images ): ?>
					<div class="swiper-slide" id="slide_<?php echo esc_attr( $index ); ?>">
						<img src="<?php echo esc_url( $images ); ?>" alt="">
					</div>
				<?php else: ?>
					<div class="swiper-slide" id="slide_<?php echo esc_attr( $index ); ?>"></div>
				<?php endif; ?>

			<?php endforeach; ?>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>

style.css

.swiper-slide {
	position: relative;
}

.swiper-slide:empty {
	display: none;
}

.swiper-slide .customize-partial-edit-shortcut button {
	left: 2px;
}