0

I am trying to make a website, that can showcase the products as the slider below: http://coolcarousels.frebsite.nl/c/68/

I have changed the slider to make it fit the full screen. Also succeeded at stopping auto play. However, now I am trying to determine how to let the slider grow in height based on the content inside it.

From what I gather, the height of the slider is set to 100% but if I let it take its own height.. it gets rid of the carousel.. So i am at a loss of how to make it take up the length of the content as well as continue to be a carousel.. 

#slider .slide {
position: relative;
display: none;
/* height: 100% !important; */}

above: if I get rid of the 100% height it takes the height of the content but all the other slides disappear.

I figure that it would be impossible for it to have dynamic height and still work as a slider. But even if it took the height of the tallest div it would be good.

I am afraid then the only thing that can do that is Javascript. I do not have enough knowledge of it to custom fit a code to my need.

I tried playing with the calculations on the codes but failed at achieving anything.

Is there anyone who can help me with this?

PS: Also realize that its now become jittery as I added one more slide to be visible contrary to the original that shows only three in all at a time. What would fix that?

here is the original tutorial Original Tutorial

and here is the JSBin of my attempt Js BIN

EDIT: @tsujp suggested something that can solve part of the problem, but we weren't able to chat, so If anyone has more suggestions to make this as smoothly functioning as possible, please feel free to add to it. Thanks

new_frontenddev
  • 163
  • 3
  • 6
  • 20
  • 1
    If you want the height to be set to the tallest div did you try setting `display: table;` instead of `display: none;`? – tsujp Oct 06 '14 at 16:28
  • Excellent solution @tsujp but that only makes each slide take up its own height. (PS: the display:none changes to display:block when each slide is active - so I changed it to display:table as you suggested) - The problem now is that the ` #slider .slide.active { cursor: default; display:table !important;} ` now the rest of the slides end at 100% height of the screen and then there is white space below that as the active slide's height increases [Js Bin Edited](http://jsbin.com/yomamojanimo/3/edit) – new_frontenddev Oct 06 '14 at 16:44
  • What is it you want exactly then? I am still slightly confused. Isn't that the dynamic aspect you wanted? – tsujp Oct 06 '14 at 16:45
  • I need the slider (not just the slides respectively) to take the height of the longest slide - sorry if I am unable to articulate what I need – new_frontenddev Oct 06 '14 at 16:48
  • So the slider takes up the height of the active slide only? E.g. if the current active slide is 50px high and the next slide is 100px - it only changes to 100px when the next slide is active? So essentially you want them the height of the largest element PER SLIDE only. – tsujp Oct 06 '14 at 16:49
  • @tsujp Yes exactly - [see](http://jsbin.com/yomamojanimo/3/edit) – new_frontenddev Oct 06 '14 at 16:51
  • The slides hidden should also be as long as the active slide - instead making it table only makes the active slide expand as per the content – new_frontenddev Oct 06 '14 at 16:53
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62536/discussion-between-new-frontenddev-and-tsujp). – new_frontenddev Oct 06 '14 at 16:53
  • Possible duplicate of: http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent – tsujp Oct 06 '14 at 17:06

0 Answers0