Javascript 动态滑动框宽度css问题_Javascript_Html_Css_Angularjs_Ionic Framework

Javascript 动态滑动框宽度css问题

javascript html css angularjs ionic-framework

Javascript 动态滑动框宽度css问题,javascript,html,css,angularjs,ionic-framework,Javascript,Html,Css,Angularjs,Ionic Framework,我有一个离子应用程序，我需要在其中动态创建离子滑块。每个离子载玻片最多只能有5个项目。接下来的5个项目将添加到下一个离子载玻片中。实现这一点我有点困惑。我认为这一切都可以通过CSS来完成，但我并不擅长。当我的数组只包含5项时，它可以正常工作。如果它含有10个，那么所有的食物都被挤在一起以下是我尝试过的： HTML: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"

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

以下是我尝试过的：

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>

CSS

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

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

Plunker

试试style=“float:left”


{{item.name}

如何为每5个项目创建一个新的离子幻灯片？它只创建一张包含5个项目的幻灯片。我需要能够生成包含5个项目的多张幻灯片。见我的plunker.在新品中一个接一个？？离子幻灯片在任何循环之外。要创建新的离子载玻片，它应该在内部，对吗？如果在离子载玻片中使用ng repeat，它将在上面创建一个载玻片到其他载玻片OK。但根据您的逻辑，它仍然只生成一张幻灯片。

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