不同高度響應高度的旋轉木馬

Question

我已經有過這個問題幾次，只是把它留在過去，但想知道未來的解決方案。

請原諒可怕的旋轉木馬我只是寫它迅速：

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不可見，它們都在溢出。

而底部的文本「推到目前爲止的文本:-(」由於它得到了一個很大的空間，但是使高度響應的方式是什麼？爲了使文本反彈停留在divs之下，不只是停留靜態的，以適應與一個DIV？有沒有辦法？

希望我解釋得很好，不知道確切名稱的！

謝謝！

Answer 1

這裏是我的全部時間在此刻..

小提琴

latest fiddle - 在最新的小提琴最新的代碼

original fiddle

基本上它只是增加一個。主動標記到div中。當然，對你的'sub'按鈕做相反的處理。

你會想要知道它何時到達最後（在頁面加載運行一個.each循環來計算滑塊中div的數量並將該數字保存爲一個變量） - 我看到你已經已經有了一個櫃檯設置。如果您在不同網站上使用腳本或您的內容數量每天都在變化，則每個循環只有在您的div數量發生變化時纔是必要的。

var subButton = "#subButton"; 
 
var addButton = "#addButton"; 
 
var caro ="#caro"; 
 

 
var clicks = 0; 
 

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

 
$(subButton).click(function(){ 
 
\t $('.active').removeClass('active'); 
 
\t $(caro).animate({'margin-left' : '0px'}, {duration: 400}); 
 
\t 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 2

的div容器會一直延伸到我相信唯一可以解決這個問題的方法就是每次旋轉木馬前進時重新計算高度，所以當acti更改div，檢查它的高度並將其設置爲javascript。

您還可以下載Ken Wheeler的Slick Carousel的副本。他達到了你要找的效果：http://kenwheeler.github.io/slick/。看看他的代碼，看看你是否可以自己複製它。

Answer 3

這是解決我的問題，使含有不同的高度，該傳送帶將不斷地改變它的高度範圍內的div高度div的旋轉木馬容器父母，以防萬一任何未來的人都需要它。例如，非常適合審查輪播。

SOLUTION

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感謝你。非常感謝您的幫助，讓我走上了正確的道路！