How to create a dynamic slider?

Guys ,
I’m working on a project that accept json data from server and display it in a table…
I want only the first 5 datas in one slide and another five in second slide and so on.
I have used the following code

        <!-- Data table start-->
        <table class="table table-striped">
          <thead>
            <tr>

              <th style="width: 45%">
                Name
              </th>
              <th style="width: 45%">
                Package
              </th>

            </tr>
          </thead>
          <tbody *ngFor="let item of data1 | slice:0:5;let i = index ">

            <tr *ngIf='data1.length>0'>

              <td>{{item.MemberName | uppercase}}</td>
              <td>{{item.MCourse }}</td>

            </tr>
          </tbody>
          <tfoot *ngIf='data1.length>5'>
            <tr>
              <td colspan="4" style="text-align:center" (click)="allJoin()">
                View All
              </td>
            </tr>
          </tfoot>

        </table>
        <!--Table end-->
      </ion-col>
    </ion-slide>
  </ion-slides>
</ion-row>
By using this code, If the data has 20 fields then there will be 20 slider, and each slider contains same data... i need ,,If the json data have 20 fields, Only 4 sliders are needed, and each slider should have 5 data,,

Can you help me?