angular-carousel

angular-carousel copied to clipboard

My bower.json:

{
  "name": "blue",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.3.1",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap-sass-official": "~3.2.0",
    "angular-sanitize": "1.3.1",
    "angular-animate": "1.3.1",
    "angular-touch": "1.3.1",
    "restangular": "~1.4.0",
    "ui-bootstrap": "~0.11.2",
    "ui-router": "~0.2.11",
    "ng-grid": "~2.0.13",
    "angular-bootstrap": "~0.11.2",
    "angular-carousel": "~0.3.5"
  },
  "devDependencies": {
    "angular-mocks": "1.3.1",
    "angular-scenario": "1.3.1"
  },
  "appPath": "app"
}

        <ul rn-carousel class="image">
            <li ng-repeat="image in email.value.files">
                <div class="layer">{{ image }}</div>
            </li>
        </ul>
        <ul rn-carousel class="image">
            <li>slide #1</li>
            <li>slide #2</li>
            <li>slide #3</li>
        </ul>

the <ul rn-carousel class="image"> shows on the DOM with width and height of 0px.

Any assistance is highly appreciated.

Hi man, The css slightly changed in carousel 0.3+ (much lighter) did you get the last css from the repo ? https://github.com/revolunet/angular-carousel/blob/master/dist/angular-carousel.css

I'm getting the same issue. Already updated the bower package but i still get height 0px even thought my images are 480px * 480px large

Wrote a simple example:

This is the result:

any plunker around ?

http://plnkr.co/edit/jQZmKrKvue090h7VKDf7?p=preview instead

yep you need to set your ul height in css

that doesnt make sense... previously i dont have to do that. Also, my images are coming in dynamically and I need to support different screen sizes. I should not be hardcoding the ul height but instead allow the height to stretch according to the image sizes.

looks like its due to the position:relative on the ul. i'll try to find a solution but if you have some time, PR appreciated :)

I don't really know the innards of how you wire up the transitions... but anyway when I changed position:absolute below to position: relative, the images appear again. However the transitions between slides broke so you would probably know best about that

angular-carousel.css:14

  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; }

is this fixed in the new release? I see you added a new feature.

nope we need to find a proper solution

I managed to get around this for now by adding the following to ul[rn-carousel]

ul[rn-carousel] {
height: 100%;
min-height: 100%;
}

That works for me on android/iOS.

@olliekav Thought the same, didnt worked as expected for me :/

This at least shows you the contents of the carousel again @iam4x :

ul[rn-carousel] {
height: 1000px;
min-height: 100%;
}

My workaround is setting the height with javascript : /

@samsface It depends on your layout, 1000px would be rly too much for me :)

Is there a workaround guys? I am still facing this problem :(

I used an angular watch on the height of the elements directly inside the carousel where the watch callback function sets the height of the carousel. I don't like it, but it's the only thing I could think off.

any news here?