Urget How to create carousel for multiple box at screen in Ionic?


#1

Hi !
I m creating app which require carousel option with multiple box at time on screen at according to touch it need to move on in both (left-right) direction.
http://owlgraphic.com/owlcarousel/

Check this owl carousel same i need to mobile screen with ionic with no touch issue.

Please help me soon.


#2

check out this
http://ionicframework.com/docs/api/directive/ionSlideBox/


#3

Hi Bonda ,

Thanks for reply but this is single box slide from the screen i want multiple box scroll which is not there…?


#4

You can set the content of each slide…
Put 10pics or 5 in a slide and you will see 5 or 10 pics on one page ;).


#5

Edit the CSS of your elements to be box styled and add some more elements. this way you can have multiple box scroll


#7
<ion-slide-box on-slide-changed="slideHasChanged($index)">
		  <ion-slide>
			<div class="box blue" style="width:50%;  background:blue;"><h1>BLUE</h1></div>
		  </ion-slide>
		  <ion-slide>
			<div class="box yellow" style="width:50%; background: yellow;"><h1>YELLOW</h1></div>
		  </ion-slide>
		  <ion-slide >
			<div class="box pink" style="width:50%;  background: pink;"><h1>PINK</h1></div>
		  </ion-slide>
		</ion-slide-box>

i m using this code but the scroll option is caming for single only bcoz

<ion-slide class="slider-slide" style="width: 819.6px; left: 0px; transition-duration: 300ms; transform: translateX(0px);" data-index="0">
			<div style="width:50%;  background:blue;" class="box blue"><h1>BLUE</h1></div>
		  </ion-slide>

its taking 819.6px width through javascript how can i solve this issue


#8

I simplified a ionic example

set images instead of “Picture1, 2, 3”


#9

Hi Bengter ,

Thanks for response but you add just a content in single side i want complete multiple box at time on screen.


#10

Hi Bengter ,

Thanks for response but you add just a content in single side i want complete multiple box at time on screen.


#11

Last try:

2 slideboxes on one page…

In other cases i do not get it…
Maybe you can make a little picture, what you want.

Greets and sorry,
bengtler


#12

Hi Bengtler…

Please don’t be sorry …u did realy great try…i really thankfull for your try…
But please don’t be sorry…Plz


#13

Smthing like this…


#14

hi ujjaval, did you figure it out?


#15

#=================Tutorial==================


If anyone is still interested in this topic I wrote a tutorial including working examples.

You can find it as a GitHub demo project: https://github.com/Gajotres/IonicCarouselDemo

###Read it here.

###Ionic View ID: 9E15B2DB


#16

here is an implementation of owl slider in ionic using directives

http://chawi3.com/2015/09/24/implement-ionic-owl-slider/


#17

Yes, you can use angular-swiper a free library for obtaining carousel views. Thanks


#18

@ujjaval hi, you’re make it ? solved the issue ? please, replay