javascript - Carousel next previous buttons 上下移动如何解决？

Question

当幻灯片更改时，下一个上一个按钮上下移动，我试图弄清楚如何确保它保持在一个位置。我认为它以某种方式根据文本(垂直居中)自行对齐，因此如果所有幻灯片中的文本都不相同，那么它似乎会上下移动。

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代码

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

你的问题是你的父元素没有静态高度，它根据它的元素高度设置高度，尝试为你的父元素和子元素设置高度: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>

你的 parent 应该是相对的并且有一些静态高度，例如500px or 100% of his parent etc. and his children should have 100% of height,

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

尝试在你的元素中用 js fiddle 实现这个想法，它起作用了