Customizr slider : centering your slides vertically in full width mode

May 2014 update: Now added in the core code of Customizr since v3.1.11

When the sliders are displayed in full width, you might encounter some frustrating cropping effect for your slides, especially on very large screen devices.

This snippet automatically keeps the slides vertically centered on any devices.

add_action ('wp_footer','tc_slider_adjust' );

function tc_slider_adjust() {
    global $wp_query;
    $queried_id                   = get_queried_object_id();
    $queried_id                   = ( !tc__f('__is_home') && $wp_query -> is_posts_page && !empty($queried_id) ) ?  $queried_id : get_the_ID();
    $slider_active                = esc_attr(get_post_meta( $queried_id, $key = 'post_slider_check_key' , $single = true ));
    if ( tc__f('__is_home') && tc__f('__get_option','tc_front_slider') !=null) {
        $slider_active            = true;
    }
    if(!$slider_active) {
        return;
    }
    ?>
    <script type='text/javascript'>
        jQuery(document).ready(function() {
            !function ( $) {
                //prevents js conflicts
                "use strict";
                function setposition( item , HeightSliderContainer  ) {
                   var  Img         = item.find('img'),
                        ImgSrc      = Img.attr('src'),
                        ImgHeight   = Img.height(),
                        Adjustment  = Math.ceil(( ImgHeight - HeightSliderContainer )*0.5);
                    if (Adjustment > 0) {
                        Img.css('top', -Adjustment + 'px');
                        Img.css('position','relative');
                    }
                }
                function adjust( item ) {
                    var HeightSliderContainer = $('.carousel-inner').height();
                    $('.item' , '.carousel-inner').each(function() {
                        var has_active  = $(this).hasClass('active'),
                            ImgHeight   = $(this).find('img').height();
                        $(this).addClass('active');
                        setposition($(this) , HeightSliderContainer);
                        if (!has_active) {
                            $(this).removeClass('active');
                        }
                    });
                }
                adjust();
                $(window).resize(function () {
                    adjust();
                });

            }(window.jQuery);
        });
    </script>
    <?php
}