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

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.

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

Please help me soon.

check out this

Hi Bonda ,

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

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 ;).

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

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

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>

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

I simplified a ionic example

set images instead of “Picture1, 2, 3”

Hi Bengter ,

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

Hi Bengter ,

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

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,

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

Smthing like this…

hi ujjaval, did you figure it out?


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

1 Like

here is an implementation of owl slider in ionic using directives


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

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