Ionic 2 - Slider - show part of second slide item

Question

I want to show part of the second slide item, but don't know how to do it. This is what I have so far (basic Ionic slides):

<ion-slides pager >
            <ion-slide>
              <h2>Slide 1</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 2</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 3</h2>
            </ion-slide>
</ion-slides>

and this is how I want it to be:

I've tried to change the width of the ion-slide to less than 100%, but the second and third slides just gets moved further to left, out of the screen.

Can anyone help me ?

Ajoy Karmakar · Accepted Answer · 2020-03-14T10:13:41.507

29

Edit:- For Ionic 5 Set the Options in the TS file.

slideOpts = {
  slidesPerView: 1.5,
  spaceBetween: 10 
};

For Ionic 3

I think you get it. This solution for the others who are still searching for this view. Just add this to the ion-slides tag.

slidesPerView="1.5" spaceBetween="10"

edited Mar 14 '20 at 10:13

answered Aug 28 '17 at 11:27

Ajoy Karmakar

671
7
14

This is the most elegant solution indeed! – Rob Oct 17 '17 at 00:11
Simply Awesome :) – Brynner Ferreira Feb 08 '18 at 16:48
Thanks :) nice one – Pradeep Mar 15 '18 at 06:28
This is the correct answer in my opinion. I read the accepted answer and didn't read on... I struggled for a while only to come to this same conclusion. – juliusbangert Jul 04 '18 at 19:42

score 6 · Answer 2 · edited Aug 28 '17 at 12:08

6

In UX, it is better for the user to know if he has more items to see, especially when we don't intend to use a pager.

ion-slides use internally http://www.idangero.us/swiper/ may this help us to accomplish that.

We can use slidesPerView="2" spaceBetween="250"

You have to refine the spaceBetween value according to your item slide size.

Lastly, you need an empty ion-slide in the end, because spaceBetween make a little mess in the positioning.

.card {
    width: 300px;
}

<ion-slides slidesPerView="2" spaceBetween="250">
    <ion-slide *ngFor="let foo of bars">
        <my-item class="card"></my-item>
    </ion-slide>
    <ion-slide>
        <!-- need a empty slide to avoid last item to be inaccessible -->
    </ion-slide>
</ion-slides>

edited Aug 28 '17 at 12:08

Rob

14,746
28
47
65

answered Feb 17 '17 at 12:56

Diego Cubissimo

61
3

but how can you make it that the last slide has no spacing on the right so it wil fit correctly in the vieuw – amir hanif Mar 20 '17 at 08:57
slidesperview is giving complete next slide in current one. how to show only part of the next slide? @diego – varun aaruru May 08 '17 at 09:08

score 4 · Answer 3 · answered May 15 '17 at 20:14

4

After wrestling with this issue, I found a pretty straightforward solution that seems to work.

<ion-slides spaceBetween="-18">

Obviously, adjust the number to match your specific needs.

answered May 15 '17 at 20:14

user4650164

99
1
9

I think this is a pretty bad solution. Diego's suggestion is definitely better, and certainly this is the right way. The solution to the problem is called slidesPerView. If you want, you can use of course spaceBetween additionally – peter70 Nov 10 '17 at 08:47

score 3 · Answer 4 · answered Jun 22 '17 at 20:26

I had some good results setting the slidesPerView to 'auto' and giving each slide a margin-right of -18px and a margin-left of 18px (except for the first and last, of which either the margin-left and margin-right are set).

Here's the template code:

 <ion-slides [slidesPerView]="'auto'">
     <ion-slide *ngFor="...">
         ...
     </ion-slide>
 </ion-slides>

And here's the css:

  ion-slide {
    width: 240px !important;
    height: 290px !important;

    margin-right: -18px;
    margin-left: 18px
  }

  ion-slide:first-child {
    margin-left: 0;
  }

  ion-slide:last-child {
    margin-right: 0;
  }

score 3 · Answer 5 · answered Jun 15 '18 at 12:05

I got the solution,

    <ion-slides pager="false" slidesPerView="1.2" spaceBetween="10" centeredSlides=true loop=true>

  <ion-slide>
    <h1 class="card">1</h1>
  </ion-slide>

  <ion-slide>
    <h1 class="card">2</h1>
  </ion-slide>

  <ion-slide>
    <h1 class="card">3</h1>
  </ion-slide>

</ion-slides>

score 2 · Answer 6 · answered Jun 18 '20 at 15:52

IONIC 5

For similar type of scenario:

.ts

 slideOpts = {
    initialSlide: 1,
    speed: 400,
    slidesPerView: 1.2,
    spaceBetween: 10,
    centeredSlides: true
};

.html

<ion-slides [options]="slideOpts">
        <ion-slide>
          <img src="https://via.placeholder.com/300x200" alt="" class="slider-img">
        </ion-slide>
        <ion-slide>
          <img src="https://via.placeholder.com/300x200" alt="" class="slider-img">
        </ion-slide>
        <ion-slide>
          <img src="https://via.placeholder.com/300x200" alt="" class="slider-img">
        </ion-slide>
    </ion-slides>

score 0 · Answer 7 · edited Mar 21 '18 at 11:35

0

From Ionic 3, you can use slidesPerView="2.5" spaceBetween="10" in ion-slides tag , the slidesPerView can have any decimal values with single decimal digit. Adjust accordingly.

edited Mar 21 '18 at 11:35

ArtOfCode

5,702
5
37
56

answered Mar 21 '18 at 11:17

Himalaya Ahuja

11
2

score 0 · Answer 8 · edited Oct 23 '18 at 18:05

0

I managed to get this view , in ionic3. It's a piece of cake. All you need is to set slidesPerView= "auto" then in your sass

ion-slide {
        width:80% !important;
        margin-top: 0px;}

see the view

edited Oct 23 '18 at 18:05

kenlukas

3,616
9
25
36

answered Oct 23 '18 at 12:17

Mahmoud Fathy

1
2

Ionic 2 - Slider - show part of second slide item

8 Answers8