Arrows
The ScrollView allows you to enable or disable its built-in navigation arrows.
To control the arrow behavior, use the arrows property. By default, arrows is set to false and the arrows are disabled.
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<input id="arrows" type="checkbox" [(ngModel)]="arrows" />
<label for="arrows">Enable Arrows</label>
</div>
<kendo-scrollview
[data]="items"
[width]="width"
[height]="height"
[arrows]="arrows">
<ng-template let-item="item">
<h2 class="demo-title">{{item.title}}</h2>
<img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
</ng-template>
</kendo-scrollview>
`,
styles: [`
.k-scrollview-wrap {
margin: 0 auto;
}
.demo-title {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 15px;
color: #fff;
background-color: rgba(0,0,0,.4);
text-align: center;
font-size: 24px;
}
`]
})
class AppComponent {
public items: any[] = [
{ title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
{ title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
public arrows: boolean = true;
}