当幻灯片更改时，上一个下一个按钮将上下移动，我试图弄清楚如何确保它保持在一个位置。我认为这是根据文本（垂直居中）对齐的方式，因此，如果所有幻灯片中的文本都不相等，则它会上下移动。
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
}
}
});
});
答案 0 :(得分：0)
您的问题是您的父元素没有静态高度，它根据项目高度设置了高度，请尝试将父元素和子元素的高度设置为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>
您的父母应该是亲戚，并且有一定的身高，例如500px或他父母的100％等，他的孩子应该有100％的身高，
.parent {
position: relative;
height: 500px;
}
.children {
height: 100%;
}
尝试在您的项目中用js实现这个想法，