CODEWITHSUNDEEP
ionic-frameworkionic2
Al-shimaa Adel
Al-shimaa Adel

Reputation: 777

horizontal slider in ionic2

how can I make horizontal slides in ionic2 like this:enter image description here

Upvotes: 0

Views: 81

Answers (1)

Teh
Teh

Reputation: 3276

First step is to change the direction of the slider, by adding direction="horizontal" to it.

Then in order to display more than one slide at once, use slidesPerView (it also accepts decimals if you want to display half of a slide)

You can also adjust the space between each slide by using the spaceBetween attribute.

Basic example:

<ion-slides direction="horizontal" slidesPerView="3.2" spaceBetween="20">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

Also please check out the official documentation for a list of all the attributes available: https://ionicframework.com/docs/2.3.0/api/components/slides/Slides/

Upvotes: 2

Related Questions