Split Slideshow

Сегодня в WordPress мы интегрируем вот такой интересный сладер:

See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.

Видео:

https://youtu.be/FYSZrfDmqik

Подключение скриптов и стилей:

	if ( is_page_template('split-slideshow/split-slideshow.php') ):
		wp_enqueue_style( 'slick-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css' );
		wp_enqueue_style( 'slick-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css' );
		wp_enqueue_script( 'slick-js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js',array('jquery') );
		wp_enqueue_script( 'jquery-mousewheel', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js',array('jquery') );
		
		wp_enqueue_style('split-slideshow-fonts', 'https://fonts.googleapis.com/css?family=Roboto+Condensed:100');
		wp_enqueue_style( 'split-slideshow-css', get_template_directory_uri() . '/split-slideshow/style.css' );
		wp_enqueue_script( 'split-slideshow-js', get_template_directory_uri() . '/split-slideshow/script.js' );
	endif;	

Шаблон страницы (ACF PRO):

<?php //Template Name: Split Slideshow ?>
<?php get_header(); ?>
<?php while(have_posts()): the_post(); ?>

<div class="split-slideshow">
  <div class="slideshow">
  	
    <div class="slider">
      <?php while ( have_rows('split_slideshow') ): the_row(); ?>	
    	
      <div class="item">
      	<?php $background = get_sub_field('background'); ?>
        <img src="<?php echo $background['sizes']['large']; ?>" />
      </div>
    
      <?php endwhile; ?>	  
    </div>
    
  </div>
  
  <div class="slideshow-text">
    <?php while ( have_rows('split_slideshow') ): the_row(); ?>
    	<div class="item"><?php the_sub_field('text'); ?></div>
    <?php endwhile; ?>
  </div>
  
</div>

<?php endwhile; ?>
<?php get_footer(); ?>

PHP-код группы полей:

//Add ACF Fields for Split Slider
if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array(
	'key' => 'group_608c235d8b01e',
	'title' => 'Управление слайдером Split Slideshow',
	'fields' => array(
		array(
			'key' => 'field_608c236007c47',
			'label' => '',
			'name' => 'split_slideshow',
			'type' => 'repeater',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'collapsed' => 'field_608c23aa07c49',
			'min' => 1,
			'max' => 5,
			'layout' => 'table',
			'button_label' => 'Добавить слайд',
			'sub_fields' => array(
				array(
					'key' => 'field_608c237c07c48',
					'label' => 'Фон слайда',
					'name' => 'background',
					'type' => 'image',
					'instructions' => '',
					'required' => 0,
					'conditional_logic' => 0,
					'wrapper' => array(
						'width' => '20',
						'class' => '',
						'id' => '',
					),
					'return_format' => 'array',
					'preview_size' => 'medium',
					'library' => 'all',
					'min_width' => '',
					'min_height' => '',
					'min_size' => '',
					'max_width' => '',
					'max_height' => '',
					'max_size' => '',
					'mime_types' => '',
				),
				array(
					'key' => 'field_608c23aa07c49',
					'label' => 'Текст слайда',
					'name' => 'text',
					'type' => 'text',
					'instructions' => '',
					'required' => 0,
					'conditional_logic' => 0,
					'wrapper' => array(
						'width' => '80',
						'class' => '',
						'id' => '',
					),
					'default_value' => '',
					'placeholder' => '',
					'prepend' => '',
					'append' => '',
					'maxlength' => '',
				),
			),
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'page_template',
				'operator' => '==',
				'value' => 'split-slideshow/split-slideshow.php',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'top',
	'instruction_placement' => 'label',
	'hide_on_screen' => array(
		0 => 'the_content',
	),
	'active' => true,
	'description' => '',
));

Скачать архив с файлами проекта: