I am working on a e-learning app and i am designing a test page.My question navigation is shown in image below.I have 20-30 question in a single test and i want vertical scrolling in the question navigation and also when user attempt question 8 it will automatically show next slide of 8 questions(9-16).
.ts code
public question = [
{ id: 1 },{ id: 2 },{id: 3 },{ id: 4 },{ id: 5 },{ id: 6 },
{ id: 7 },{ id: 8 },{ id: 9 },{ id: 10 },{ id: 11 },{ id: 12 },
{ id: 13 }, { id: 14 },{ id: 15 },{ id: 16 },{ id: 17 },{ id: 18 }
]
.html code
<ion-row nowrap class="headerChip">
<div *ngFor="let item of question; let idx = index" >
<ion-chip (click)="changeData(item.id)" style="width: 38px">
<ion-label >{{item.id}}</ion-label>
<div></div>
</ion-chip>
</div>
</ion-row>
.css code
.chip-md {
border-radius: 19px;
height: 38px;
width: 38 px;
font-size: 13px;
line-height: 38px;
color: rgba(0, 0, 0, 0.87);
background: rgba(0, 0, 0, 0.12);
margin: 2px 4px;
}
.chip-md > ion-label {
margin: 0 10px 0px 15px;
}