Invested Traveler: Home Slider

Documentation:

A basic home page slider with color overlay capabilities.

Reference

HTML:

<!-- Home Slider --> <div id="carousel-home" class="carousel fade" data-ride="carousel"> <ol class="carousel-indicators"> <?php if( get_field('slider', 'option') ): $i = 0; while( has_sub_field('slider', 'option') ): ?> <li data-target="#carousel-home" data-slide-to="<?php echo $i ?>" <?php if ($i == 0) { echo 'class="active"'; } ?>></li> <?php $i++; endwhile; endif; ?> </ol> <div class="carousel-inner" role="listbox"> <?php if( get_field('slider', 'option') ): $i = 0; while( has_sub_field('slider', 'option') ): $slider_image = get_sub_field('slider_image', 'option'); $color_overlay = get_sub_field('slider_overlay', 'option'); if ($color_overlay) { $color_overlay = hex2rgba($color_overlay, 0.5); } ?> <div class="item<?php if ($i == 0) { echo ' active'; } ?>"> <div class="carousel-slide" style="background-image: url(<?php echo $slider_image['url']; ?>);" title="<?php echo $slider_image['alt']; ?>"> <div class="slide-caption-wrapper" <?php if ($color_overlay) { ?> style="background-color: <?php echo $color_overlay; ?>"<?php } ?>> <div class="slide-caption-rd"> <h1><?php echo the_sub_field('slider_title', 'option'); ?></h1> <p><?php echo the_sub_field('slider_content', 'option'); ?></p> <div class="slider-border-white"></div> </div> </div> </div> </div> <?php $i++; endwhile; endif; ?> </div> </div>

CSS:

/* Carousel */ $header-font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif; #carousel-home { .carousel-slide { width: 100%; height: 600px; background-size: cover; background-position: center center; } .carousel-inner > .item { height: 600px; } .slide-caption-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .slide-caption-rd { text-align: center; padding: 30px; display: block; } .slide-caption-rd h1 { font-size: 45px; letter-spacing: 5px; font-weight: 300; margin: 0; text-transform: uppercase; } .slide-caption-rd p { margin: 40px 0; font-family: $header-font-stack; font-weight: 300; letter-spacing: 2px; } .slide-caption-rd h1, .slide-caption-rd p { color: #fff; } .slider-border-white { border-bottom: 8px solid white; width: 60px; margin: 0 auto; } .carousel-indicators li { width: 12px; height: 12px; margin: 0; } } @media (max-width: 768px) { #carousel-home { .slide-caption-rd { h1 { font-size: 28px; } p { font-size: 14px; } } .carousel-slide { height: 500px; } } }

PHP:

function acf_options_add_home_slider() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field_group(array ( 'key' => 'group_588339763009e', 'title' => 'Theme Settings', 'fields' => array ( array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_588339dd66a7d', 'parent' => 'theme_settings', 'label' => 'Home Slider', 'name' => '', 'type' => 'tab', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'sub_fields' => array ( array ( 'return_format' => 'array', 'preview_size' => 'large', 'library' => 'all', 'min_width' => '', 'min_height' => '', 'min_size' => '', 'max_width' => '', 'max_height' => '', 'max_size' => '', 'mime_types' => '', 'key' => 'field_58833a09eb36f', 'label' => 'Slider Image', 'name' => 'slider_image', 'type' => 'image', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_58833a19eb370', 'label' => 'Slider Title', 'name' => 'slider_title', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_58833a23eb371', 'label' => 'Slider Content', 'name' => 'slider_content', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_58833a32eb372', 'label' => 'Slider URL', 'name' => 'slider_url', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'key' => 'field_58833a3ceb373', 'label' => 'Slider Overlay', 'name' => 'slider_overlay', 'type' => 'color_picker', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), ), 'min' => 0, 'max' => 0, 'layout' => 'block', 'button_label' => 'Add Slide', 'collapsed' => '', 'key' => 'field_588339faeb36e', 'parent' => 'theme_settings', 'label' => 'Slider', 'name' => 'slider', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), ), 'location' => array ( array ( array ( 'param' => 'options_page', 'operator' => '==', 'value' => 'theme-settings', ), ), ), 'menu_order' => 0, 'position' => 'normal', 'style' => 'default', 'label_placement' => 'top', 'instruction_placement' => 'label', 'hide_on_screen' => '', 'active' => 1, 'description' => '', )); endif; } add_action( 'acf/init', 'acf_options_add_home_slider' ); function hex2rgba($color, $opacity = false) { $default = 'rgb(0,0,0)'; //Return default if no color provided if(empty($color)) return $default; //Sanitize $color if "#" is provided if ($color[0] == '#' ) { $color = substr( $color, 1 ); } //Check if color has 6 or 3 characters and get values if (strlen($color) == 6) { $hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] ); } elseif ( strlen( $color ) == 3 ) { $hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] ); } else { return $default; } //Convert hexadec to rgb $rgb = array_map('hexdec', $hex); //Check if opacity is set(rgba or rgb) if($opacity){ if(abs($opacity) > 1) $opacity = 1.0; $output = 'rgba('.implode(",",$rgb).','.$opacity.')'; } else { $output = 'rgb('.implode(",",$rgb).')'; } //Return rgb(a) color string return $output; }