动态滑动宽度的CSS问题

我有一个离子应用程序，其中我需要动态地创建一个离子滑块。每个离子滑块最多只能有5个项目。接下来的5个项目被添加到下一个离子载玻片。我有点困惑，要实现这一点。我认为这可以通过CSS完成，但我不擅长。当我的数组只包含5个项目时它工作正常。如果它包含10个，那么所有的都被压缩在一起。动态滑动宽度的CSS问题

这里是我的尝试：

HTML：

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css"> 
    <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body ng-app='todo'> 

    <ion-pane> 
    <ion-content ng-controller="MyCtrl"> 
     <div class="button-bar" style="border: 2px solid #00aec9;"> 
     <ion-slide-box show-pager="false" does-continue="true" ng-repeat="mod in modules"> 
      <ion-slide> 
      <div ng-repeat="item in mod.details" class="footer-bar" align="center"> 
       {{item.name}} 
      </div> 
      </ion-slide> 
     </ion-slide-box> 
     </div> 
    </ion-content> 
    </ion-pane> 

</body> 

</html>

angular.module('todo', ['ionic']) 

.controller('MyCtrl', function($scope) { 

    $scope.modules = [{ 
    details: [{ 
     name: "name 1" 

    }, { 
     name: "name 2" 
    }, { 
     name: "name 3" 
    }, { 
     name: "name 4" 
    }, { 
     name: "name 5" 
    }] 
    }, { 
    details: [{ 
     name: "1.1" 

    }, { 
     name: "2.2" 
    }, { 
     name: "3.3" 
    }, { 
     name: "4.4" 
    }, { 
     name: "5.5" 
    }] 
    }]; 
});

CSS

.slider-slide 
{ 
    width:300px; 
    border: 1px solid red; 
}

Plunker

http://plnkr.co/TILgeHZ4hkHHghn8GvbB

来源

2015-10-13 Sonu Kapoor

尝试风格= “浮动：左”

<ion-content ng-controller="MyCtrl"> 
    <div class="button-bar" style="border: 2px solid #00aec9;"> 
     <ion-slide-box show-pager="false" does-continue="true"> 
      <ion-slide ng-repeat="mod in modules" style="float:left"> 
       <div ng-repeat="item in mod.details" class="footer-bar" align="center"> 
        {{item.name}} 
       </div> 
      </ion-slide> 
     </ion-slide-box> 
    </div> 
</ion-content>

来源

2015-10-13 17:22:45

如何创造每5项新的离子幻灯片？它只创建一个包含5个项目的幻灯片。我需要能够生成多个幻灯片，每个幻灯片有5个项目。看到我的闯入者。 –

一个接一个地在新行？ –

离子幻灯片在任何循环之外。要创建一个新的离子滑块，它应该在里面，对吗？ –

动态滑动宽度的CSS问题

回答

相关问题