cycle2
cycle2 copied to clipboard
malsup
Carousel effect: divs with text
I'm having an issue using the carousel effect on divs with text, you can see what's happening here: http://jsfiddle.net/pmffy/
I tried the white-space:normal on the .home-block but then the sentinel doesn't calculate the height correctly...
I have this problem. I'm making a carousel with a link that wraps the image of each slide and a second link below with text. The text in the link appear in a single line. When i used white-space: normal on the link, the sentinel doesn't calculate the height correctly and only shows part of the text.
It seems that it's only added the height of one line of text.
I also encountered this. After banging my head against the wall for quite some time I discovered that white-space: normal fixes it. I have the height defined, so I didn't have any other issues, but just wanted to let you know that this affected me to.
it didn't help me to define height.. it is still one div lower, another higher..
I'm having the same issue as the OP, and I am seeing the staggered divs, as described by @kazantip151 When I apply the rule white-space:normal to any nested elements, the top position of the slide is affected. I've forked the initial fiddle to display this: http://jsfiddle.net/left23/c74a7/4/ *Note the grey boxes' difference in height, and how they all align to the bottom instead of top:0
If you got some div higher and some others lower after setting white-space:normal, try give all slides and their children div a fixed height, set all children position:absolute and give "top" values for each of those children (first child top:0px, 2nd child top:100px, 3rd child top:130px and so on)
.cycle-slide { height:180px; (add up of all its children's height) width:300px; } .cycle-slide > div { position:absolute; width:300px; white-space:normal; } .cycle-slide > .firstChild { top:0px; height:100px; } .cycle-slide > .secondChild { top:100px; (equals the height of the 1st child) height:30px; } .cycle-slide > .thirdChild { top:130px; (equals the height of the 1st + 2nd child) height:50px; }
I know it may not looks the best if different 1st (or 2nd) children has different lines of text, but that's the best I can work out. (luckily in my case I only have different lines of texts for the last children)
Using vertical-align: top on the slide divs solved my issues, as seen here: http://jsfiddle.net/left23/27gm00rq/1/
it didn't help me to define height.. it is still one div lower, another higher..
Realise this is old but for anyone who comes looking for help with the height issue, try setting display: inline-flex on the carousel container and then height: inherit on the slides.
