Как показать несколько изображений в одной строке. с использованием ионно-сдвижной коробки в ионном приложении

59
9

В ионном я хочу показать несколько изображений в одной строке. прямо сейчас он показывает только одно изображение, которое занимает всю ширину. Мое требование показано ниже как изображение enter image description here

спросил(а) 2016-07-07T12:56:00+03:00 4 года, 3 месяца назад
1
Решение
81

ion-slidebox устарел. Используйте ионные слайды, в которых используется Swiper. Минимальная требуемая версия IONIC - 1,2.

Вот сообщение, которое я написал, чтобы вы могли его использовать

Btw, ионные слайды используют потрясающие SwiperJs, поэтому для вашего требования в вашем контроллере, когда вы определяете swiper, вы можете просто использовать их слайдыPerView и установить его на несколько слайдов, которые вы хотите показать, как показано ниже!

$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);
}
};

ответил(а) 2016-07-07T13:05:00+03:00 4 года, 3 месяца назад
41

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

ответил(а) 2016-10-18T04:04:00+03:00 4 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема