Search code examples
cssonsen-ui

onsen-ui carousel within list-item display issue

i am trying to make a list with carousel in each list item, this is how i did it

    <ons-list id ="list"  style="padding:0px;" ng-controller="ItemController">
    
    <ons-list-item ng-repeat="item in local" style="padding:0;">
      <ons-carousel  swipeable initial-index="0" style="height: 100%;width: 100 %;position: absolute;">
        <ons-carousel-item style="padding:0;">
          <ons-button modifier = "quiet" ng-click="menu.close();customSetMainPage(item.id);">
            {{item.name}}
          </ons-button>
        </ons-carousel-item>
        <ons-carousel-item>
          <ons-button ng-click="deletepresentation(item.id);local.splice($index, 1);">
                Remove
                <ons-icon icon="ion-trash-a"/>
          </ons-button>
        </ons-carousel-item>
      </ons-carousel>
    </ons-list-item>
  

    </ons-list>

now the list is working but when first time displayed it shows like this :

enter image description here

when it's supposed to be like this: enter image description here

And after adding an item to the list, it shows the second carousel item and not the first :

enter image description here

Any help ?

Solution

  • Carousel had some bugs in previous version related to your first issue so I suggest you to update to the latest Onsen UI if you are not already using it.

    Also, you need to restore the item you are removing to its initial index before you actually remove it. And better to add auto-refresh and auto-scroll attributes to carousel as well.

    Working here: http://codepen.io/frankdiox/pen/wKwpGZ

    Hope it helps.