1

In ionic i want to show multiple images in a single row. right now it shows only one image that took the entire width.My requirement is showing below as an image enter image description here

Jobincs
  • 4,003
  • 2
  • 14
  • 11

2 Answers2

3

ion-slidebox is deprecated. Use ion-slides that uses Swiper. The minimum IONIC version required would be 1.2.

Here's a post I wrote that you could use to implement it

Btw, ion-slides uses the awesome SwiperJs, so for your requirement, in your controller when you define the swiper, you could just use their slidesPerView and set it to a number of slides that you want to show like below!

$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); 
 }
};
Srijith
  • 1,434
  • 9
  • 14
  • Can you do a plunker – Srijith Jul 07 '16 at 12:12
  • https://plnkr.co/edit/7zBdx1iM0NF8zlYQS54w?p=preview please see the tab-dash.htm for the slides and controll.js for controller – Jobincs Jul 08 '16 at 05:41
  • Just forked your plunk and create a new one here https://plnkr.co/edit/1crqLumyqfdkrOzkgJib?p=preview There were a couple of errors on console, but basically the slider was there you just had to give it a height. I set a height of 400px on the ion-slides and now it shows up. Check it out – Srijith Jul 08 '16 at 05:51
  • I know that this is pretty old, but I was having an issue with the code in your plnkr. I have it almost the exact same with but the slides just show up in a row (http://i.imgur.com/PlKcnjQ.png) and ignore the options. Any idea what's going on? – user2317084 Aug 19 '16 at 03:22
  • Could you post a new question with a plunker? – Srijith Aug 19 '16 at 04:26
  • I can't seem to replicate it in codepen maybe it's something I did that's breaking it – user2317084 Aug 19 '16 at 18:51
  • For me $scope.swiperOptions.onInit is never called. is the slides code I use. Any advice on how to debug this and figure out why onInit is never called? – user2317084 Aug 19 '16 at 19:00
  • A plunker would really help! I would have no idea without actually looking at the code. A variety of things could go wrong – Srijith Aug 20 '16 at 06:47
0
         </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>
Prashant vishwakarma
  • 469
  • 5
  • 6