ons-carousel with ons-list not rendering correctly with initial-index="1"

Question

I am trying to utilize the initial-item feature for ons-carousel. I am using the following code. When I try to put it in and ons-list and initial-index="1" the item is offset to the left revealing a sliver of the other item. As soon as I try to swipe it goes back to the correct position

<section style="background-color: white">

    <ons-list ng-repeat="task in tasks">
        <ons-list-item modifier="chevron">
            <ons-carousel initial-index="1" var="taskCarousel" swipeable="" auto-scroll="" style="width: 100%; height: 70px; color: black; background-color: #33cd5f">
                <ons-carousel-item style="background-color: #33cd5f">
                    View #1 {{ task.descr }}
                </ons-carousel-item>
                <ons-carousel-item style="background-color: #5b2c7a">
                    View #2 {{ task.details }}
                </ons-carousel-item>
            </ons-carousel>
        </ons-list-item>
    </ons-list>
</section>

app.controller('TestController', function ($scope) {
    $scope.tasks = [
        {
            id: "1",
            descr: "Task Description #1",
            details: "Details of Task #1"
        },
        {
            id: "2",
            descr: "Task Description #2",
            details: "Details of Task #1"
        },
        {
            id: "3",
            descr: "Task Description #3",
            details: "Details of Task #1"
        },
        {
            id: "4",
            descr: "Task Description #4",
            details: "Details of Task #1"
        }
    ];

});

Which version of Onsen UI are you using? – Fran Dios Jan 15 '16 at 02:14 — Fran Dios, Jan 15 '16 at 02:14

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

It is happening because the list-item has left-right padding and the carousel-item has position:absolute; transform: translate3d(-{width}px, 0px, 0px);. so when your second carousel item (index=1) is displayed it stays slightly left side (equal to the left padding of list-item).
To solve it, you can use this css.

#my-section {
  margin: 0 10px;
}
#my-section ons-list-item {
  padding: 0 !important;
}
#my-section ons-carousel-item {
  display: table;
  margin: 2px 0;
  text-align: center;
}

where #my-section is id of section element. it helps in writing css specific to solve the issue and not affecting other part of the site/app.

You can see the working code here. Play with it to see how it works.

NOTE: this plunker does not use angular so I have repeated elements statically

ons-carousel with ons-list not rendering correctly with initial-index="1"

1 Answers1