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">

              <th style="width: 45%">
              <th style="width: 45%">

          <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>

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

        <!--Table end-->
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?