SEAC: Masthead Slider

Documentation:

Image Assets:

HTML:

<div id="carousel-home" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="false"> <div class="carousel-inner" role="listbox"> <?php if( have_rows('slider', 'option') ): $counter = 0; while( have_rows('slider', 'option') ): the_row(); if ($counter == 0) { echo '<div class="item active">'; } else { echo '<div class="item">'; } ?> <img src="<?php the_sub_field('slider_image', 'option'); ?>" alt="..."> <div class="slide-caption"> <h2><?php the_sub_field('slider_caption', 'option'); ?></h2> <div class="slide-caption-btns"> <a href="<?php the_sub_field('slider_button_#1_url', 'option'); ?>"><button class="rd-btn btn-transparent-gold"><?php the_sub_field('slider_button_#1_text', 'option'); ?> <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></button></a> <a href="<?php the_sub_field('slider_button_#2_url', 'option'); ?>"><button class="rd-btn btn-transparent-white"><?php the_sub_field('slider_button_#2_text', 'option'); ?> <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></button></a> </div> </div> <?php echo '</div>'; $counter++; endwhile; endif; ?> </div> <div class="slider-controls"> <a class="slide-control-left" href="#carousel-home" role="button" data-slide="prev"> <img src="<?php echo get_template_directory_uri(); ?>/library/images/slider-arrow-left.png" alt="Left Button Navigation for the Main Slider"> </a> <a class="slide-control-right" href="#carousel-home" role="button" data-slide="next"> <img src="<?php echo get_template_directory_uri(); ?>/library/images/slider-arrow-right.png" alt="Right Button Navigation for the Main Slider"> </a> </div> </div>

CSS:

/* Carousel */ .slide-caption { position: absolute; right: 0; bottom: 70px; padding: 30px; margin: 0px; background-color: rgba(29, 29, 29, 0.85); color: #fff; text-align: right; max-width: 500px; } .slide-caption h2 { margin-top: 0; font-size: 42px; } .slide-caption p { margin-bottom: 0; } .slide-caption a { color: #fff; } #carousel-home img { max-height: 600px; } .slider-controls { z-index: 1338; position: absolute; bottom: 0; width: 100%; padding: 10px 20px; } .slide-control-right { float: right; } #carousel-home { width: 100%; overflow: hidden; z-index: 1; } .rd-btn { background: none; border: none; padding: 4px 25px; letter-spacing: 1px; text-transform: uppercase; } .btn-transparent-red { border: 1px solid #bd022d; font-weight: 700; } .btn-transparent-white { border: 1px solid #fff; font-weight: 700; } @media (max-width: 992px) { .slide-caption { text-align: center; top: 0; width: 100%; height: 100%; left: 0; right: 0; display: flex; justify-content: center; padding: 20px; max-height: 600px; max-width: none; } .slide-caption > * { align-self: center; } .slide-caption-btns button { margin-bottom: 10px; } } @media (max-width: 768px) { .slide-caption h2 { margin-top: 0; font-size: 32px; } .slide-caption-btns { padding: 0 20px; } .slide-caption-btns button { width: 100%; } } @media (max-width: 521px) { .slide-caption h2 { font-size: 22px; } .slider-controls { display: none; } }

PHP:

function acf_options_add_masthead_slider() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field(array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_585135419a6f0', 'label' => 'Masthead Slider', 'name' => '', 'type' => 'tab', 'parent' => 'theme_settings', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'key' => 'field_5668d63a8059e', 'parent' => 'theme_settings', 'label' => 'Slider', 'name' => 'slider', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'min' => '', 'max' => '', 'layout' => 'row', 'button_label' => 'Add Slider', 'collapsed' => '', 'sub_fields' => array ( array ( 'key' => 'field_5668d63a81480', 'label' => 'Slider Image', 'name' => 'slider_image', 'type' => 'image', 'instructions' => 'Add in an image for the front page slider.', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'return_format' => 'url', 'preview_size' => 'medium', 'library' => 'all', 'min_width' => '', 'min_height' => '', 'min_size' => '', 'max_width' => 2200, 'max_height' => '', 'max_size' => '', 'mime_types' => '', ), array ( 'key' => 'field_5764c0129d3cc', 'label' => 'Slider Caption', 'name' => 'slider_caption', 'type' => 'text', 'instructions' => '', 'required' => '', 'conditional_logic' => '', 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, ), array ( 'key' => 'field_5764c01f9d3cd', 'label' => 'Slider Button #1 Text', 'name' => 'slider_button_#1_text', 'type' => 'text', 'instructions' => '', 'required' => '', 'conditional_logic' => '', 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, ), array ( 'key' => 'field_5764c0289d3ce', 'label' => 'Slider Button #1 URL', 'name' => 'slider_button_#1_url', 'type' => 'text', 'instructions' => '', 'required' => '', 'conditional_logic' => '', 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, ), array ( 'key' => 'field_5764c0309d3cf', 'label' => 'Slider Button #2 Text', 'name' => 'slider_button_#2_text', 'type' => 'text', 'instructions' => '', 'required' => '', 'conditional_logic' => '', 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, ), array ( 'key' => 'field_5764c03c9d3d0', 'label' => 'Slider Button #2 URL', 'name' => 'slider_button_#2_url', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, ), ), )); endif; } add_action( 'acf/init', 'acf_options_add_masthead_slider' );