Carousel next previous buttons moving up and down how to fix it?

Question

When the slide changes the next previous buttons move up and down I am trying to figure out how to make sure that it remains in one position. I think it is somehow aligning itself according to the text (vertically at the center) so if the text is not equal in all the slides then it appears to move up and down.

https://jsfiddle.net/39amxqjd/4/

    <!-- Color -->
    <link rel="stylesheet" type="text/css" id="skin"  href="assets/css/themes/default.css">

<div class="testimonial-section">
    <div class="paralax-overlay">
    </div>
    <div class="testimonial-content">
        <div class="container">
            <div class="row wow">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wow fadeInDown delay-07s">
                    <div class="section-title">
                        <h3>

                            <span>

                            </span>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-push-2 col-md-8 wow fadeInUp delay-07s">
                    <div class="carousel slide" data-ride="carousel" id="indecator">
                        <ol class="carousel-indicators">
                            <li class="active" data-slide-to="0" data-target="#indecator">
                            </li>
                            <li class="" data-slide-to="1" data-target="#indecator">
                            </li>
                            <li class="" data-slide-to="2" data-target="#indecator">
                            </li>
                        </ol>
                        <div class="carousel-inner full_display" role="listbox">
                            <div class="item sngl-testimonial active">
                                <div class="sngle-tsmt">
                                    <div class="client-dsc">
                                        <h3 style="color: #fff;">dsfdsf</h3>
                                        <p style="font-size: 19px;">
                                             fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd 

                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="item sngl-testimonial">
                                <div class="sngle-tsmt">
                                    <div class="client-dsc">
                                         <br><br><br>
                                        <h3 style="color: #fff; font-size: 26px;">sfdsdfds</h3>

                                        <p style="font-size: 19px;">
                                            fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd 
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="item sngl-testimonial">
                                <div class="sngle-tsmt">
                                    <div class="client-dsc">
                                        <h3 style="color: #fff; font-size: 26px;">sdfsfsd</h3>
                                        <p style="font-size: 19px;">
                                            fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd fsdfdsfsd 
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <a class="left left_twit_crousel_btn" data-slide="prev" href="#indecator" role="button">
                            <i class="fa fa-angle-left">
                            </i>
                            <span class="sr-only">
                                Previous
                            </span>
                        </a>
                        <a class="right right_twit_crousel_btn" data-slide="next" href="#indecator" role="button">
                            <i class="fa fa-angle-right">
                            </i>
                            <span class="sr-only">
                                Next
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-lg-2">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clearfix">
</div>
<script
              src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="app.js"></script>

Js Code

jQuery(document).ready(function() {


     // ------------------------------------------------------------------------------ //
    // owl Detail property
    // ------------------------------------------------------------------------------ //
    var changeSlide = 4; // mobile -1, desktop + 1
    // Resize and refresh page. slider-two slideBy bug remove
    var slide = changeSlide;
    if ($(window).width() < 600) {
        var slide = changeSlide;
        slide--;
    } else if ($(window).width() > 999) {
        var slide = changeSlide;
        slide++;
    } else {
        var slide = changeSlide;
    }
    $(document).ready(function() {
        $('.one').owlCarousel({
            nav: true,
            items: 1,
        })
        $('.wrap-features-bestproperties').owlCarousel({
            loop: true,
            items: 1,
            autoplay: true,
            autoplayTimeout: 4000,
            smartSpeed: 1200,
        })
        $('.two').owlCarousel({
            nav: true,
            margin: 15,
            mouseDrag: false,
            touchDrag: false,
            responsive: {
                0: {
                    items: changeSlide - 1,
                    slideBy: changeSlide - 1
                },
                600: {
                    items: changeSlide,
                    slideBy: changeSlide
                },
                1000: {
                    items: changeSlide + 1,
                    slideBy: changeSlide + 1
                }
            }
        })
        var owl = $('.one');
        owl.owlCarousel();
        owl.on('translated.owl.carousel', function(event) {
            $(".right").removeClass("nonr");
            $(".left").removeClass("nonl");
            if ($('.one .owl-next').is(".disabled")) {
                $(".slider .right").addClass("nonr");
            }
            if ($('.one .owl-prev').is(".disabled")) {
                $(".slider .left").addClass("nonl");
            }
            $('.slider-two .item').removeClass("active");
            var c = $(".slider .owl-item.active").index();
            $('.slider-two .item').eq(c).addClass("active");
            var d = Math.ceil((c + 1) / (slide)) - 1;
            $(".slider-two .owl-dots .owl-dot").eq(d).trigger('click');
        })
        $('.right').click(function() {
            $(".slider .owl-next").trigger('click');
        });
        $('.left').click(function() {
            $(".slider .owl-prev").trigger('click');
        });
        $('.slider-two .item').click(function() {
            var b = $(".item").index(this);
            $(".slider .owl-dots .owl-dot").eq(b).trigger('click');
            $(".slider-two .item").removeClass("active");
            $(this).addClass("active");
        });
        var owl2 = $('.two');
        owl2.owlCarousel();
        owl2.on('translated.owl.carousel', function(event) {
            $(".right-t").removeClass("nonr-t");
            $(".left-t").removeClass("nonl-t");
            if ($('.two .owl-next').is(".disabled")) {
                $(".slider-two .right-t").addClass("nonr-t");
            }
            if ($('.two .owl-prev').is(".disabled")) {
                $(".slider-two .left-t").addClass("nonl-t");
            }
        })
        $('.right-t').click(function() {
            $(".slider-two .owl-next").trigger('click');
        });
        $('.left-t').click(function() {
            $(".slider-two .owl-prev").trigger('click');
        });
    });
    // CLIENTS SLIDER LOGOS
    $(".clients-slider").owlCarousel({
        nav: true,
        margin: 15,
        rewind: true,
        smartSpeed: 1200,
        autoplay: true,
        navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
        responsive: {
            0: {
                items: 1
            },
            480:{
                items:1
            },
            600: {
                items: 2
            },
            1000: {
                items: 5
            }
        }
    });

});

Answer 1

You can force the height of your .carousel-inner so the arrows will always be centered regarding of the same sized box. You can see the result on your updated fiddle .

This solution is really basic and do not care of the content the client can put on. You will probably have to limit client characters entry, or do an ellips for example.

Answer 2

Your problem is that your parent element doesn't have static height, it set height depended of it's items height, try to set height to your parent and to children height: 100%

<div class="carousel-inner full_display" role="listbox">
       <div class="item sngl-testimonial active">...</div>
       <div class="item sngl-testimonial">...</div>
       <div class="item sngl-testimonial">...</div>
</div>

Your parent should be relative and have some static height eg 500px or 100% of his parent etc. and his children should have 100% of height,

.parent {
    position: relative;
    height: 500px;
}
.children { 
    height: 100%;
}

Try to implement this idea in your project in js fiddle it worked