SDCCS: 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">'; } ?> <div class="carousel-image" style="background-image: url(<?php the_sub_field('slider_image', 'option'); ?>);" alt="..."> </div> <div class="slide-caption"> <h2><?php the_sub_field('slider_title', 'option'); ?></h2> <p><?php the_sub_field('slider_caption', 'option'); ?></p> <div class="slide-caption-btns"> <a href="<?php the_sub_field('slider_button_url', 'option'); ?>"><button class="slide-caption-btn rd-btn"><?php the_sub_field('slider_button_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:

/* Masthead Slider */ $carousel-height: 500px; #carousel-home .item, .carousel-image { height: $carousel-height; } .carousel-image { width: 100%; float: left; background-size: cover; background-position: center center; } .slide-caption { position: absolute; right: 0; bottom: 70px; padding: 30px; margin: 0; background-color: rgba(52, 53, 58, 0.85); text-align: left; max-width: 400px; h2, p, button { color: #fff; font-family: $body-font-stack; font-weight: 700; } h2 { margin-top: 0; font-size: 30px; } p { margin-bottom: 10px; } } .slider-controls { z-index: 2; position: absolute; bottom: 0; width: 100%; padding: 10px 20px; } .slide-control-right { float: right; } .rd-btn.slide-caption-btn { border-color: $primary-color; } #carousel-home { width: 100%; overflow: hidden; z-index: 1; } @media (max-width: 992px) { #carousel-home .item, .carousel-image { height: 400px; } .slide-caption { text-align: center; top: 0; width: 100%; height: 100%; left: 0; right: 0; display: block; padding: 100px 20px 20px 20px; max-height: 600px; max-width: none; } .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; } }

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_5762c0129d3cc', 'label' => 'Slider Title', 'name' => 'slider_title', 'type' => 'text', 'instructions' => '', 'required' => '', 'conditional_logic' => '', 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, ), 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_5764c01f9d3cl', 'label' => 'Slider Button Text', 'name' => 'slider_button_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_5764c0289d3ke', 'label' => 'Slider Button URL', 'name' => 'slider_button_url', 'type' => 'text', 'instructions' => '', 'required' => '', 'conditional_logic' => '', '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' );