SDCCS: Vertical Slider Testimonial

Documentation:

HTML:

<!-- Vertical Slider Testimonial --> <div class="vertical-slider-testimonial-wrapper"> <div class="vertical-slider-testimonial"> <div id="vertical-slider-testimonial-carousel" class="carousel fade" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <?php if( have_rows('vertical_slider_testimonials', 'option') ): $counter = 0; while( have_rows('vertical_slider_testimonials', 'option') ): the_row(); if ($counter == 0) { echo '<div class="item active">'; } else { echo '<div class="item">'; } ?> <?php $image = get_sub_field('vertical_slider_testimonial_image', 'option'); ?> <div class="vertical-slider-testimonial-img" title="<?php echo $image['alt']; ?>" style="background-image: url('<?php echo $image['url']; ?>');"> </div> <div class="vertical-slider-testimonial-content-wrapper"> <div class="vertical-slider-testimonial-content"> <p><?php echo the_sub_field('vertical_slider_testimonial_content', 'option'); ?></p> <p class="testimonial-author"><?php echo the_sub_field('vertical_slider_testimonial_author', 'option'); ?></p> </div> </div> </div> <?php $counter++; endwhile; endif; ?> </div> <div class="carousel-controls"> <a class="left carousel-control" href="#vertical-slider-testimonial-carousel" role="button" data-slide="prev"> <i class="fa fa-arrow-up" aria-hidden="true"></i> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#vertical-slider-testimonial-carousel" role="button" data-slide="next"> <i class="fa fa-arrow-down" aria-hidden="true"></i> <span class="sr-only">Next</span> </a> </div> </div> </div>

CSS:

/* Vertical Slider Testimonial */ .vertical-slider-testimonial-wrapper { position: relative; width: 100%; float: left; } .vertical-slider-testimonial { width: 992px; margin: 0 auto; background-size: cover; background-color: #34353a; } #vertical-slider-testimonial-carousel .item > * { display: inline-block; float: left; } .vertical-slider-testimonial-img { width: 240px; height: 230px; background-position: center center; background-size: cover; } .vertical-slider-testimonial-img img { width: 100%; height: 100%; } .vertical-slider-testimonial-content { width: 752px; p { color: #fff; } } .vertical-slider-testimonial-content-wrapper { height: 100%; } .vertical-slider-testimonial .carousel-inner > .item { height: 230px; } #vertical-slider-testimonial-carousel .item .vertical-slider-testimonial-content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } #vertical-slider-testimonial-carousel .item .vertical-slider-testimonial-content { -ms-flex-item-align: center; align-self: center; padding: 0 100px 0 50px; font-size: 16px; } .testimonial-author { font-weight: 700; text-transform: uppercase; } .vertical-slider-testimonial-wrapper { margin-top: -115px; } #vertical-slider-testimonial-carousel .carousel-controls { position: absolute; right: 40px; top: 90px; z-index: 3; } #vertical-slider-testimonial-carousel .carousel-control.right { top: 30px; }

PHP:

function acf_options_vertical_slider_testionials() { acf_add_local_field(array ( 'key' => 'field_58a74a2dc697c', 'parent' => 'theme_settings', 'label' => 'Vertical Slider Testimonials', 'name' => '', 'type' => 'tab', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'placement' => 'left', 'endpoint' => 0, )); acf_add_local_field(array ( 'key' => 'field_58a74a40c697d', 'parent' => 'theme_settings', 'label' => 'Vertical Slider Testimonials', 'name' => 'vertical_slider_testimonials', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'collapsed' => '', 'min' => 0, 'max' => 0, 'layout' => 'block', 'button_label' => 'Add Testimonial', 'sub_fields' => array ( array ( 'key' => 'field_58a74a60c697e', 'label' => 'Vertical Slider Testimonial Image', 'name' => 'vertical_slider_testimonial_image', 'type' => 'image', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, '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_58a74b5bc6980', 'label' => 'Vertical Slider Testimonial Content', 'name' => 'vertical_slider_testimonial_content', 'type' => 'textarea', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'maxlength' => '', 'rows' => '', 'new_lines' => 'wpautop', ), array ( 'key' => 'field_58a74b0ac697f', 'label' => 'Vertical Slider Testimonial Author', 'name' => 'vertical_slider_testimonial_author', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', ), ), )); } add_action( 'acf/init', 'acf_options_vertical_slider_testionials' );