Сегодня в WordPress мы интегрируем вот такой интересный сладер:
See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.
Видео:
Подключение скриптов и стилей:
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' => '',
));
Скачать архив с файлами проекта: