javascript - 具有不同高度响应高度的旋转木马

Question

我遇到过几次这个问题，只是过去了，但想知道 future 的解决方案。

请原谅我刚刚快速写的可怕的轮播:

http://jsfiddle.net/00wwkjux/111/

在此示例中，div id = "7"中有很多中断，因此容器的整个高度都会响应它。

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

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

底部的文本“文本向下推到现在:-(”因此得到了很大的空间，但是如何使高度响应？这样文本就会在 div 下方反弹，而不是只是保持静态以适应一个 div？有办法吗？

希望我解释得很好，不确定确切的名字!

谢谢!

Answer 1

这就是我目前所有的时间......

fiddle

latest fiddle - 最新 fiddle 的最新代码

original fiddle

基本上它只是向 View 中的 div 添加一个 .active 标记。当然，对您的“子”按钮执行相反的操作。

您需要对其进行编码以了解它何时到达终点(在页面加载时运行 .each 循环以计算 slider 中的 div 数量并将该数字保存为变量)——我知道您已经设置了一个柜台。如果您的 div 数量会发生变化，如果您在不同站点上使用脚本或您的内容量每天都在变化，则每个循环都是必要的。

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;
});
}

.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; }

<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 :-(