1

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

goredwards
  • 2,486
  • 2
  • 30
  • 40

1 Answers1

1

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.

Nate Barbettini
  • 51,256
  • 26
  • 134
  • 147
  • thanks - a good summary - and better written than the response to https://github.com/revolunet/angular-carousel/issues/297 - what surprised me was the requirement to add a CSS file to get a directive working... of course it's easy if you only have pictures within the carousel - since pics aren't affected by the css. However, we have fairly complex templates with their own css styling - and since only 1 class is needed for the `li` / child - in the end we simply added that. Would be nice if they added this to the docs. – goredwards Feb 17 '15 at 19:50
  • The documentation is a little thin, true. It does seem fairly common to have a CSS file as a requirement for a directive, though. I've been working to get angular-carousel working my app with non-image templates as well. Did your solution of adding a class to the `li` work well? – Nate Barbettini Feb 17 '15 at 19:53
  • 1
    yes - worked fine - and helped not having to namespace all the css classes used within the carousel slides. since it's only 1 style required to get the carousel working properly, i'm surprised the directive doesn't simply add an element.style on the `li` as it does with `display: inline-block;` - which is added manually by the directive, even though it's also included in the CSS class you list above - that would simplify things and allow users to add the CSS if they thought it was useful and/or necessary... – goredwards Feb 17 '15 at 20:05