How to reduce space around slides in ionic

Ionic Framework ionic-v3
1

I want to insert slides on top of a page and then several cards below that in ionic. The space above and below the slides are large. How to reduce this? I want the slides and cards outside slide to be close by. And also reduce the space around the slides. Is it possible? How to do it?

Home.html

<ion-header>
    <ion-toolbar color="primary">
      <button ion-button menuToggle (click)="presentPopover($event)">
       <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title>Home</ion-title>
   </ion-toolbar>
  </ion-header>

<ion-content padding> 

  <ion-slides pager>
    <ion-slide>
      <ion-card>
       <ion-item>
         <ion-avatar item-start>
          <img src="assets/images/youtube.gif">
         </ion-avatar>
         <h2>Marty McFly</h2>
         <p>November 5, 1955</p>
       </ion-item>

      <ion-card-content>
        <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
      </ion-card-content>
    </ion-card>
  </ion-slide>

  <ion-slide>
      <ion-card>
       <ion-item>
         <ion-avatar item-start>
          <img src="assets/images/youtube.gif">
         </ion-avatar>
         <h2>Marty McFly</h2>
         <p>November 5, 1955</p>
       </ion-item>

      <ion-card-content>
        <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
      </ion-card-content>
    </ion-card>
  </ion-slide>
</ion-slides>

 <ion-card>
  <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

  <ion-card>
    <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

 <ion-card>
   <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

  <ion-card>
    <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

How it looks like

Capture
Capture323×579 14.3 KB
Capture2
Capture2322×578 17.8 KB

2

Inspect the respective element in browser, find appropriate classes of element and do trial and error by changing property value (margin, padding,etc)

3

By default slides are appearing in one whole page. Even 5px of padding is only increasing the space.

4

Used a grid and problem solved

1 Like