So zeigen Sie mehrere Bilder in einer einzelnen Zeile an. mit ion-slide-box in ionischer anwendung

Question

In ionic möchte ich mehrere Bilder in einer einzigen Zeile anzeigen. jetzt zeigt es nur ein Bild, das die gesamte width.My Anforderung nahm wird nachfolgend als Bild

Answer 1

ionen slidebox veraltet zeigt. Verwenden Sie Ionen-Folien, die Swiper verwenden. Die erforderliche minimale IONIC-Version wäre 1.2.

Here's einen Beitrag ich, dass Sie es

Btw, Ionen gleitet die ehrfürchtige SwiperJs implementieren verwenden, um schrieb könnte verwendet, so für Ihre Anforderung, in dem Controller, wenn Sie die swiper definieren, können Sie nur verwenden, ihre slidesPerView und legen Sie es auf eine Reihe von Folien, die Sie wie unten angezeigt werden möchten!

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