Search code examples
javascriptangularjsangularjs-directiveangular-carousel

Angular Carousel - is "position: absolute" required on <li> elements?

I was struggling to get rn-carousel working correctly with slide 2+ being all out of position
...until i stumbled across this (seemingly unrelated) issue:
https://github.com/revolunet/angular-carousel/issues/245

I added the following class which made things work perfectly:

ul[rn-carousel] > li {
    color: black;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible;
    vertical-align: top;
    position: absolute;
    left: 0;
    right: 0;
    white-space: normal;
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    height: 100%;
    display: inline-block; }

I then proceeded to eliminate all CSS styling until I found the style which fixed the issue:

Apparently "position: absolute" is a required CSS style on all <li> elements ??

Nothing mentioned in the (rather limited) documentation...
- do i have a bug somewhere ?
- is this a standard CSS issue I'm not aware of ?
(for info, the rn-carousel directive adds display: inline-block to <li> automatically)

tried this on the following version ranges with the same result:
- rn-carousel versions 0.3.5 - 0.3.9
- angularjs versions 1.3.0 - 1.3.12

Plunker

Solution

  • position: relative on the parent container (ul) and position: absolute on the child (li) is required for angular-carousel to work properly.

    Including the default angular-carousel.css stylesheet adds these definitions:

    ul[rn-carousel] {
  //...
  position: relative;
  //...
  }

  ul[rn-carousel] > li {
    //...
    position: absolute;
    //...
    }

    This shouldn't interfere with any custom styling you need to do on the contents of the li. If necessary, you can wrap your contents in a div and namespace any styles to a class on that element.