Cycle plugin not working with divs for me.

Cycle plugin not working with divs for me.

I have a problem getting Cycle to display my div's correctly in a slideshow.

I have a div with a background picture, this div and picture is set to scale to the size of the parent div, depending on browser window size, and image is scaled to fit in height, center and hiding overflow.

With a static div this works nicely, resizing browser window works as I want it to.

Now, I want the background pictures to run as a slideshow, but when setting up a number of divs with different background images things go haywire. At least when using the Cycle plugin.


This example works with the div and images scaled and positioned as desired, slideshow leaves quite a few controls to be desired.

First div/image loads nicely, but the subsequent divs are seriously malformatted.

Following is my divs for the Cycle slideshow that doesn't behave:

  1. <div id="slideshow" class="slideshow">

  3. <div id="slidediv1">
  4.  <img class="size-4" src="./img/forsidebillede1.jpg">
  5. </div>
  6. <div id="slidediv2">
  7.  <img class="size-4" src="./img/forsidebillede2.jpg">
  8. </div>
  9. <div id="slidediv3">
  10.  <img class="size-4" src="./img/forsidebillede3.jpg">
  11. </div>
  12. <div id="slidediv4">
  13.  <img class="size-4" src="./img/forsidebillede4.jpg">
  14. </div>
  15. </div>


And the associated css:
  1. #slideshow{position:absolute;top:275px;bottom:30px;left:0px;right:0px;overflow: hidden;text-align:center;z-index:5;}
  2. #slidediv1{background:url(./img/forsidebillede1.jpg) center top; background-size: auto 100%; overflow:hidden;}
  3. #slidediv2{background:url(./img/forsidebillede2.jpg) center top; background-size: auto 100%; overflow:hidden;}
  4. #slidediv3{background:url(./img/forsidebillede3.jpg) center top; background-size: auto 100%; overflow:hidden;}
  5. #slidediv4{background:url(./img/forsidebillede4.jpg) center top; background-size: auto 100%; overflow:hidden;}
  6. .size-4{visibility: hidden;
  7. max-height:100%;
  8. width: auto;}