如何在單行顯示多個圖像。在離子應用中使用離子滑塊盒

Question

在離子中，我想在單行中顯示多個圖像。現在它示出了作爲整個width.My要求下面示出作爲圖像

Answer 1

離子slidebox不贊成使用僅一個圖像。使用使用Swiper的離子幻燈片。所需的最低IONIC版本是1.2。

Here's後我寫的，你可以用它來實現它

順便說一句，離子幻燈片使用真棒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>