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

Question

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

请原谅我刚刚写的太糟糕了：

在此示例中 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 不可见，它们都在溢出中。

底部的文字 "text pushed down so far :-(" 也因此变得很大 space，但是如何使高度响应呢？这样文本就会在 div 下方跳动，而不仅仅是保持静止以适应一个 div？有办法吗？

希望我解释得很好，不知道确切的名字！

谢谢！

Answer 1

容器 div 将始终拉伸到最大子项的大小。我相信解决这个问题的唯一方法是每次旋转木马前进时重新计算高度。因此，当活动 div 更改时，检查它的高度并将其设置在 javascript.

您还可以下载 Ken Wheeler 的 Slick Carousel 副本。他达到了您正在寻找的效果：http://kenwheeler.github.io/slick/。查看他的代码，看看您是否可以在自己的代码中复制它。

Answer 2

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

fiddles

latest fiddle - 最新 fiddle

上的最新代码

original fiddle

基本上它只是在 div 视图中添加一个 .active 标记。当然，对您的 'sub' 按钮执行相反的操作。

您需要对其进行编码以了解它何时到达终点（运行页面加载时的 .each 循环以计算滑块中 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 :-(

Answer 3

这是我的问题的解决方案，它使一个轮播容器父级包含 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 归功于你。非常感谢您帮助我走上正确的道路！

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

Carousel with different heights responsive height

html

javascript

css

jquery

carousel