Beth Beth - 7 months ago 26
CSS Question

Carousel with different heights responsive height

I've had this issue a couple of times and just left it in the past but would like to know the solution for future.

Please excuse the horrible carousel I just wrote it quickly:

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

In this example div id = "7" has alot of breaks in it so that makes the entire height of the container respond to it.

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


I know the reason is because even though the divs aren't visible they are all there in the overflow.

And the text at the bottom "text pushed down so far :-(" gets a big space due to it, but what is the way of making the heights responsive? So that the text bounces about staying below the divs, not just staying static to fit in with one div? Is there a way?

Hope I explained it well, not sure of exact names!

Thanks!

Answer Source

Here's all I have time for at the moment..

fiddles

latest fiddle - latest code on latest fiddle

original fiddle

Basically it's just adding an .active marker to the div in view. And of course do the opposite for your 'sub' button.

You will want to code it to know when it reaches the end (run an .each loop on page load to count the number of divs in the slider and save the number as a variable) -- i see you've already got a counter set up. Ther each loop is only neccesary if your amount of divs will change, if youre using the script on different sites or your amount of content changes day to day.

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