Invested Traveler: Logo Highlight Vertical Slider

Documentation:

HTML:

<!-- Logo Highlight Vertical Slider --> <div id="logo-highlight-vertical-slider-wrapper"> <div class="container"> <div id="logo-highlight-vertical-slider"> <div id="logo-highlight-vertical-slider-type"> <div id="logo-highlight-vertical-slider-type-inner"> <h3>Customers</h3> </div> </div> <div id="logo-highlight-vertical-slider-logo-container"> <div id="logo-highlight-vertical-slider-logo-sheet" data-y="0"> <?php if( get_field('logo_highlight', 'option') ): $row_counter = 0; $rows = 0; while( has_sub_field('logo_highlight', 'option') ): $logo = get_sub_field('logo', 'option'); if ($row_counter == 0) { $rows++; ?> <div class="logo-highlight-vertical-slider-row"> <?php } ?> <div class="logo-highlight-vertical-slider-logo"><img src="<?php echo $logo['url'] ?>" /></div> <?php $row_counter++; if ($row_counter == 3) { ?> </div> <?php $row_counter = 0; } ?> <?php endwhile; ?> <?php if ($row_counter != 0) { echo '</div>'; } ?> <?php endif; ?> </div> <div id="logo-highlight-vertical-slider-control-wrapper"> <div class="logo-highlight-vertical-slider-control" data-control="prev"> <i class="fa fa-angle-up"></i> </div> <?php for ($i=0; $i < $rows; $i++) { ?> <div class="logo-highlight-vertical-slider-control logo-highlight-vertical-slider-control-row<?php if ($i == 0){ echo ' logo-highlight-vertical-slider-control-active'; } ?>" data-control="<?php echo $i * -100; ?>"></div> <?php } ?> <div class="logo-highlight-vertical-slider-control" data-control="next"> <i class="fa fa-angle-down"></i> </div> </div> </div> </div> </div> </div>

CSS:

/* Logo Highlight Vertical Slider */ $header-font-stack: 'Open Sans'; #logo-highlight-vertical-slider-wrapper { width: 100%; float: left; background: linear-gradient(90deg, #2e3a7b 50%, #ececec 50%); margin-top: 50px; } #logo-highlight-vertical-slider { float: left; width: 100%; background-color: #ececec; height: 200px; } #logo-highlight-vertical-slider-type { float: left; background-color: #2e3a7b; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 40px; position: relative; h3 { text-align: center; margin: 0; font-family: $header-font-stack; text-transform: uppercase; font-weight: 100; letter-spacing: 2px; color: #fff; } &:after { content: ' '; width: 40px; height: 100%; position: absolute; right: -40px; border-left-color: rgb(46, 58, 123); border-top-width: 100px; border-top-color: transparent; border-top-style: solid; border-bottom-style: solid; border-bottom-color: transparent; border-left-width: 35px; border-left-style: solid; border-bottom-width: 100px; margin-left: 20px; } } .logo-highlight-vertical-slider-logo { display: inline-block; margin: 0 30px; } .logo-highlight-vertical-slider-row { width: 100%; height: 100px; } #logo-highlight-vertical-slider-logo-sheet { display: inline-block; float: left; transition: 0.6s; } #logo-highlight-vertical-slider-control-wrapper { float: right; width: 60px; height: 100%; } .logo-highlight-vertical-slider-control { text-align: center; } #logo-highlight-vertical-slider-logo-container { float: right; height: 100px; overflow: hidden; padding: 0px; margin: 50px 0; } .logo-highlight-vertical-slider-control[data-control=prev] i, .logo-highlight-vertical-slider-control[data-control=next] i { color: #409bc8; font-size: 24px; cursor: pointer; } .logo-highlight-vertical-slider-control-row { border-bottom: 1px solid black; width: 20px; padding-top: 5px; margin: 0px auto 5px auto; cursor: pointer; } .logo-highlight-vertical-slider-control-active { border-bottom: 3px solid black; } .logo-highlight-vertical-slider-logo img { max-width: 300px; max-height: 100px; } @media (max-width: 1199px) { .logo-highlight-vertical-slider-logo { display: inline-block; margin-right: 10px; text-align: right; margin: 0; img { width: 80%; } } } @media (max-width: 992px) { .logo-highlight-vertical-slider-logo { img { width: initial; } } #logo-highlight-vertical-slider-logo-container { position: relative; } #logo-highlight-vertical-slider-type { width: 100%; height: 200px; } #logo-highlight-vertical-slider { margin-top: 0; height: auto; } .logo-highlight-vertical-slider-logo { margin: 0; width: 100%; height: 100px; text-align: center; } #logo-highlight-vertical-slider-logo-container, .logo-highlight-vertical-slider-row { height: auto; } #logo-highlight-vertical-slider-control-wrapper { position: absolute; right: 0; top: 0; display: none; } #logo-highlight-vertical-slider-wrapper { background: none; } #logo-highlight-vertical-slider-type:after { display: none; } #logo-highlight-vertical-slider-logo-container, #logo-highlight-vertical-slider-logo-sheet { width: 100%; } }

JS:

// Logo Highlight Vertical Slider $('.logo-highlight-vertical-slider-control').on('click', function () { // Variables var control_type = $(this).attr('data-control'); var sheet_transform = parseInt($('#logo-highlight-vertical-slider-logo-sheet').attr('data-y')); var row_amount = $('#logo-highlight-vertical-slider-logo-sheet').children().length - 1; var transform_limit = row_amount * -100; switch(control_type) { case 'prev': if (sheet_transform < 0) { sheet_transform = sheet_transform + 100; $('#logo-highlight-vertical-slider-logo-sheet').attr('data-y', sheet_transform); $('#logo-highlight-vertical-slider-logo-sheet').css('transform', 'translateY(' + sheet_transform + 'px)'); } break; case 'next': if (sheet_transform != transform_limit) { sheet_transform = sheet_transform - 100; $('#logo-highlight-vertical-slider-logo-sheet').attr('data-y', sheet_transform); $('#logo-highlight-vertical-slider-logo-sheet').css('transform', 'translateY(' + sheet_transform + 'px)'); } break; default: sheet_transform = $(this).attr('data-control'); $('#logo-highlight-vertical-slider-logo-sheet').attr('data-y', sheet_transform); $('#logo-highlight-vertical-slider-logo-sheet').css('transform', 'translateY(' + sheet_transform + 'px)'); break; } var selected_row = $('#logo-highlight-vertical-slider-logo-sheet').attr('data-y'); $('.logo-highlight-vertical-slider-control').removeClass('logo-highlight-vertical-slider-control-active'); $('.logo-highlight-vertical-slider-control[data-control=' + selected_row + ']').addClass('logo-highlight-vertical-slider-control-active'); });

PHP:

// Logo Highlight Vertical Slider function acf_options_add_logo_highlight_vertical_slider() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field(array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_587b7e2a17d2c', 'parent' => 'theme_settings', 'label' => 'Logo Highlight Vertical Slider', 'name' => '', 'type' => 'tab', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'sub_fields' => array ( array ( 'return_format' => 'array', 'preview_size' => 'medium', 'library' => 'all', 'min_width' => '', 'min_height' => '', 'min_size' => '', 'max_width' => '', 'max_height' => '', 'max_size' => '', 'mime_types' => '', 'key' => 'field_587b7e4217d2e', 'label' => 'Logo', 'name' => 'logo', 'type' => 'image', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), ), 'min' => 0, 'max' => 12, 'layout' => 'table', 'button_label' => '', 'collapsed' => '', 'key' => 'field_587b7e3717d2d', 'parent' => 'theme_settings', 'label' => 'Logo Highlight', 'name' => 'logo_highlight', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); endif; } add_action( 'acf/init', 'acf_options_add_logo_highlight_vertical_slider' );