Invested Traveler: Sidebar Slider

Documentation:

HTML:

<div class="wrapper sidebar-slider-wrapper" style="background-image: url('<?php echo get_template_directory_uri(); ?>/library/images/bg-case-study.jpg');"> <div id="sidebar-slider"> <div id="carousel-study" class="carousel fade" data-ride="carousel" data-interval="10000" data-pause="false"> <div class="carousel-inner" role="listbox"> <?php $counter=0; if( get_field('featured_resources', 'option') ): while( has_sub_field('featured_resources', 'option') ): ?> <?php $resource_image = get_sub_field('featured_resource_image', 'option'); ?> <?php if ($counter == 0) { ?> <div class="item active"> <?php } else { ?> <div class="item"> <?php } ?> <div class="row"> <div class="col-md-12"> <div class="sidebar-slider-header sidebar-sidebar-slider-header"> <div class="featured-resource-sidebar-image" style="background-image: url('<?php echo $resource_image['url'] ?>');" title="<?php echo $resource_image['alt'] ?>" /></div> <p class="mini-title-header"><?php the_field('resource_type', 'option'); ?></p> <h2><?php the_sub_field('featured_resource_title', 'option'); ?></h2> </div> </div> </div> <div class="row"> <div class="col-md-12 cost-recovered-text sidebar-cost-recovered-text"> <p><?php the_sub_field('featured_resource_description', 'option'); ?></p> </div> </div> <div class="row"> <div class="col-md-12 sidebar-slider-footer"> <a href="<?php the_sub_field('featured_resource_link'); ?>"><button class="rd-btn btn-transparent-white">See More</button></a> </div> </div> </div> <?php $counter++; endwhile; endif; ?> </div> <div class="row"> <div class="col-md-12 sidebar-slider-footer"> <ol class="carousel-indicators carousel-study-indicators"> <?php $counter=0; if( get_field('featured_resources', 'option') ): while( has_sub_field('featured_resources', 'option') ): ?> <?php if($counter == 0) { ?> <li data-target="#carousel-study" data-slide-to="<?php echo $counter ?>" class="active"></li> <?php } else { ?> <li data-target="#carousel-study" data-slide-to="<?php echo $counter ?>"></li> <?php } ?> <?php $counter++; endwhile; endif; ?> </ol> </div> </div> </div> </div> </div>

CSS:

/* Sidebar Slider */ .sidebar-slider-wrapper { background-color: #4198c7; width: 100%; float: left; } #sidebar-slider { color: white; padding: 80px 0px; } .mini-title-header { font-size: 14px; text-transform: uppercase; margin-bottom: 0; color: #fff; } .sidebar-slider-header { text-align: center; color: #fff; } .cost-recovered { text-align: center; } .cost-recovered.sidebar-cost-recovered { border-right: none; } .cost-recovered { text-align: center; border-right: 1px solid white; } .cost-recovered p, .cost-recovered h3 { color: white; margin-bottom: 0; } .cost-recovered p { color: rgba(255, 255, 255, 0.6); } .cost-recovered h3 { font-size: 60px; margin-top: 0; font-weight: bold; } .cost-recovered-text { margin-top: 10px; padding-left: 50px; } #sidebar #sidebar-slider { padding: 0 0 40px 0; } .cost-recovered-text.sidebar-cost-recovered-text { padding: 0 40px; text-align: center; } .cost-recovered-text.sidebar-cost-recovered-text p { color: #fff; } .sidebar-slider-header.sidebar-sidebar-slider-header h2 { font-size: 28px; margin: 5px 0; font-weight: 100; color: #fff; } .sidebar-slider-footer { text-align: center; margin: 20px 0 0 0; } .btn-transparent-white { background-color: transparent; border: 2px solid white; color: white; } .btn-transparent-black { background-color: transparent; border: 2px solid black; } .featured-resource-sidebar-image { height: 200px; width: 100%; background-size: cover; margin-bottom: 20px; } .sidebar-slider-wrapper a { color: #fff; } #sidebar-slider .carousel-study-indicators { position: relative; margin: 0; top: 0; bottom: 0; left: 0; right: 0; display: block; width: 100%; margin-top: 10px; } #sidebar-slider .carousel-indicators li { width: 40px; height: 6px; border: none; border-radius: 0; margin: 0; background-color: rgba(183, 183, 183, 0.34); transition: 0.5s; } #sidebar-slider .carousel-indicators .active { background-color: rgba(255, 255, 255, 0.54); width: 40px; height: 6px; margin: 0; }

PHP:

function acf_options_add_sidebar_slider() { acf_add_local_field(array ( 'key' => 'field_572961fef36ce', 'label' => 'Featured Resources', 'name' => 'featured_resources', 'parent' => 'theme_settings', 'type' => 'tab', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'placement' => 'left', 'endpoint' => 0, )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_587a63b5ff9sf', 'parent' => 'theme_settings', 'label' => 'Resource Type', 'name' => 'resource_type', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'key' => 'field_5729621bf36cf', 'label' => 'Featured Resources', 'name' => 'featured_resources', 'parent' => 'theme_settings', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'collapsed' => '', 'min' => '', 'max' => '', 'layout' => 'block', 'button_label' => 'Add Resource', 'sub_fields' => array ( array ( 'key' => 'field_5842c8b3763f5', 'label' => 'Featured Resource Image', 'name' => 'featured_resource_image', 'type' => 'image', 'instructions' => '', 'required' => '', 'conditional_logic' => '', 'wrapper' => array ( 'width' => '', '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_57296233f36d0', 'label' => 'Featured Resource Title', 'name' => 'featured_resource_title', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, ), array ( 'key' => 'field_57296296f36d2', 'label' => 'Featured Resource Description', 'name' => 'featured_resource_description', 'type' => 'textarea', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'maxlength' => '', 'rows' => '', 'new_lines' => '', 'readonly' => 0, 'disabled' => 0, ), array ( 'key' => 'field_572962b9f36d3', 'label' => 'Featured Resource Link', 'name' => 'featured_resource_link', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'post_type' => array ( ), 'taxonomy' => array ( ), 'allow_null' => 0, 'multiple' => 0, ), ), )); } add_action( 'acf/init', 'acf_options_add_sidebar_slider' );