Question

我已经有过几次这个问题而且过去只是离开了它，但我想知道未来的解决方案。

请原谅我刚写完的可怕的旋转木马：

在这个例子中，div id =＆＃34; 7＆＃34;它有很多断点，这样可以使容器的整个高度响应它。

<div class="reviewcaro">  
<div id="7">aa
aa<br><br><br><br>
aa<br><br><br><br><br><br><br>
</div>    
</div>

我知道原因是因为即使div不可见，它们也都在溢出中。

底部的文字＆＃34;文字到目前为止被推倒了： - （＆＃34;由于它而占据了一个很大的空间，但是什么方法可以使高度响应？所以文本反弹了保持低于div，而不仅仅是保持静态以适应一个div？有没有方法？

希望我解释得很清楚，不确定确切名字！

谢谢！

Answer 1

此处我现在有时间......

<强>小提琴

latest fiddle - 关于最新小提琴的最新代码

original fiddle

基本上它只是在视图中为div添加.active标记。当然，对于你的＆＃39; sub＆＃39;按钮。

您需要对其进行编码以了解它何时到达结尾（在页面加载时运行.each循环以计算滑块中div的数量并将数字保存为变量） - 我看到你＆＃39;我们已经有一个柜台设置了。如果您在不同站点上使用脚本或者您的内容量每天都在变化，那么如果您的div数量会发生变化，那么每个循环都是必需的。

＆＃13;

var subButton = "#subButton";
var addButton = "#addButton";
var caro ="#caro";

var clicks = 0;

if (screen.width > 1){
$(addButton).click(function(){
	$('.active').addClass('remove');
	$('.active').next().addClass('active');
 	 $(caro).animate({
   	marginLeft: '-=100%'
   }, 400, function() {
    $('.active.remove').removeClass('active remove');
    $('.active.remove').removeClass('active remove');
   });   	 
	 clicks+=1;
	 
	 if (clicks > 4) 
		{
	 	$(caro).animate({'margin-left' :'0px'}, {duration: 400}); 
		clicks = 0;
		};			
});

$(subButton).click(function(){
	$('.active').removeClass('active');
	 $(caro).animate({'margin-left' : '0px'}, {duration: 400});  
	clicks = 0;
});
}

＆＃13;

.wrapperreview{width:100%;margin:0 auto;}
.containerreview{width:100%;position:relative;overflow:hidden;}
.reviews-carousel{
  display: flex;
  width:500%;
}
.reviewcaro {
  display: flex;
  justify-content: center;
  align-items: center;
  width:20%;
  height: 0;
  margin:0 auto;
  padding:0 30px;
  font-size: 40px;
}
.reviewcaro.active {
  height: auto;
}
.reviewcaro div {
  displaY: flex;
  align-items: center;
}
#a { height: 50px; }
#b { height: 150px; }
#c { height: 100px; }
#d { height: 250px; }
#e { height: 200px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="subButton">  sub </button>
<button id="addButton">  add </button>
<div class="wrapperreview" >
  <div class="containerreview" >
    <div class="reviews-carousel" id="caro"> 
      <div class="reviewcaro active"><div id="a">A</div></div>
      <div class="reviewcaro"><div id="b">B</div></div>
      <div class="reviewcaro"><div id="c">C</div></div>
      <div class="reviewcaro"><div id="d">D</div></div>
      <div class="reviewcaro"><div id="e">E</div></div>
    </div>
  </div>
</div>
 
 text pushed down so far :-(

＆＃13;

Answer 2

这是我的问题的解决方案，使旋转木马容器父母包含不同高度的div，旋转木马将不断改变它的高度到div的高度，以防万一未来需要它。非常适合评论轮播。例如。

<强> 解

https://jsfiddle.net/fj1y0opj/

<强> HTML

<button id="subButton">  sub </button>
<button id="addButton">  add </button>
<div class="wrapperreview" >
  <div class="containerreview" >
    <div class="reviews-carousel" id="caro"> 
      <div class="reviewcaro active"><div id="a">A</div></div>
      <div class="reviewcaro"><div id="b">758475 84758475847584 7584758475 84758 475847584<br><br></div></div>
      <div class="reviewcaro"><div id="c">C</div></div>
      <div class="reviewcaro"><div id="d">D<br><br><br></div></div>
      <div class="reviewcaro"><div id="e">E</div></div>
    </div>
  </div>
</div>

<强> CSS

.wrapperreview{width:100%;margin:0 auto;}
.containerreview{width:100%;position:relative;overflow:hidden;}
.reviews-carousel{
  display: flex;
  width:100%;
}
.active {
  display: flex !important;
}
.reviewcaro {
  display: none;
  justify-content: center;
  align-items: center;
  width:100%;
  height: auto;
  margin:0 auto;
  padding:0 30px;
  font-size: 40px;
}
.reviewcaro.active {
  height: initial;
}
.reviewcaro div {
  display: flex;
  align-items: center;
}

<强> JAVASCRIPT

var subButton = "#subButton";
var addButton = "#addButton";
var caro ="#caro";
var total = $(".reviewcaro").length;
var clicks = 0;

if (screen.width > 1){
$(addButton).click(function(){
    clicks++;

  if(clicks == total) {
     $(caro).animate({
     marginLeft: '-100%'
   }, 400, function() {
    $(caro).css('margin-left','0px');
        $('.active').removeClass('active');
        $('.reviewcaro:first').addClass('active');
   });       
    clicks = 0;
  } else {

   console.log(clicks);
     $(caro).animate({
     marginLeft: '-100%'
   }, 400, function() {
        $('.active').addClass('remove');
        $('.active').next().addClass('active');
      $(caro).css('margin-left','0px');
     $('.active.remove').removeClass('active remove');
   });       

  }





});

$(subButton).click(function(){
     $(caro).animate({
     marginLeft: '-100%'
   }, 400, function() {
    $(caro).css('margin-left','0px');
        $('.active').removeClass('active');
        $('.reviewcaro:first').addClass('active');
   });       
    clicks = 0;
});
}

@Hastig Zusammenstellen感谢你。非常感谢你帮助我走上正确的道路！

具有不同高度响应高度的转盘

2 个答案: