ons-carousel ons-list無法正確顯示initial-index =「1」

我正在嘗試使用ons-carousel的初始項目功能。我正在使用下面的代碼。當我嘗試放入並且ons-list和initial-index =「1」時，該項目向左偏移顯示另一個項目的條子。當我試圖將其滑回到正確的位置ons-carousel ons-list無法正確顯示initial-index =「1」

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

});

來源

2016-01-14 Mark A. Rupert

哪個溫泉UI的版本，您使用的角度，所以我已經重複的元素？ –

我正在使用v1.3.13 –

它發生，因爲列表項有左右邊距和旋轉木馬項目有position:absolute; transform: translate3d(-{width}px, 0px, 0px);。所以當你的第二個輪播物品（索引= 1）被顯示時，它保持略微左側（等於列表項的左側填充）。
要解決它，你可以使用這個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; 
}

其中#my-section是段元素的id。它有助於編寫特定的CSS來解決問題，而不會影響站點/應用程序的其他部分。您可以查看工作代碼here。玩它看看它是如何工作的。

注：本plunker不使用靜態

來源

2016-01-16 21:04:38 vinesh

ons-carousel ons-list無法正確顯示initial-index =「1」

回答

相關問題