angularjs - 如何在一行中显示多个图像。在离子应用中使用离子滑块

Question

在离子中，我想在一行中显示多个图像。现在它只显示一个占据整个宽度的图像。我的要求在下面显示为图像

Answer 1

ion-slidebox 已弃用。使用使用 Swiper 的 ion-slides。所需的最低 IONIC 版本为 1.2。

这是我写的一篇文章，你可以用它来实现它

顺便说一句，ion-slides 使用了很棒的SwiperJs，所以根据您的要求，在您的控制器中，当您定义 swiper 时，您可以使用他们的slidesPerView并将其设置为您想要显示的多个幻灯片，如下所示！

$scope.swiperOptions = {
 /* Whatever options */

 effect: 'slide',
 initialSlide: 0,
 slidesPerView: 3,

/* Initialize a scope variable with the swiper */
 onInit: function(swiper){
  $scope.swiper = swiper;
  // Now you can do whatever you want with the swiper
 },
 onSlideChangeEnd: function(swiper){
   console.log('The active index is ' + swiper.activeIndex); 
 }
};

Answer 2

         </div>
      <ion-slide ng-controller="HomeCtrl" ng-init="';ary1=[0,1,2];ary2=[3,4,5];ary3=[6,7,8]">
          <ion-slide-box show-pager="false" auto-play="false" style="width:100%" does-continue="false">
              <ion-slide ng-repeat="i in [1,2,3]" style="height:180px;">

                  <div ng-if="i==1" ng-repeat="n in ary1" style="width:100%;">

                      <div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
                      </div>
                  </div>
                  <div ng-if="i==2" ng-repeat="n in ary2" style="width:100%;">

                      <div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
                      </div>
                  </div>
                  <div ng-if="i==3" ng-repeat="n in ary3" style="width:100%;">

                      <div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
                      </div>
                  </div>

              </ion-slide>
          </ion-slide-box>
      </ion-slide>