1行に複数のイメージを表示する方法。イオンアプリケーションでイオンスライドボックスを使用

Question

イオンでは、私は単一の行に複数の画像を表示したい。今では全体width.My要件が

Answer 1

イオンslideboxは廃止された画像として以下に表示された1つの画像のみを示しています。スワイパーを使用するイオンスライドを使用してください。必要な最小IONICバージョンは1.2です。

Here's私はあなたがそれを

ところで、イオンスライドがあなたのコントローラであなたはswiperを定義するときに、あなたの条件のためのよう、あなただけ使用することができ、素晴らしいSwiperJsを使用して実装するために使用することができることを書いたポスト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>