ScrollViewComponent

Represents the Kendo UI ScrollView component for Angular.

Use the ScrollViewComponent to display a horizontally scrollable list of items. You can customize the content and navigation.

html

<kendo-scrollview [data]="items" [width]="width" [height]="height">
   <ng-template let-item="item">
      <h2>{{item.title}}</h2>
      <img width="100%" [src]="item.url" />
   </ng-template>
</kendo-scrollview>

Selector

kendo-scrollview

Export Name

Accessible in templates as #kendoScrollViewInstance="kendoScrollView"

Inputs

Name	Type	Default	Description
activeIndex	number	0	Sets the current item index (see example).
animate	boolean	true	Enables or disables built-in animations (see example).
arrows	boolean	false	Enables or disables the built-in navigation arrows (see example).
data	any[]	[]	Provides the data source for the ScrollView (see example).
endless	boolean	false	Enables or disables endless scrolling mode, where items loop endlessly (see example).
height	string		Sets the height of the ScrollView (see example). By default, the height is not set and must be explicitly defined.
pageable	boolean	false	Enables or disables the built-in pager (see example).
pagerOverlay	ScrollViewPagerOverlay	'none'	Sets the pager overlay style to dark, light, or none.
width	string		Sets the width of the ScrollView (see example). By default, the width is not set and must be explicitly defined.

Events

Name	Type	Description
activeIndexChange	EventEmitter<number>	Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
itemChanged	EventEmitter<ItemChangedEvent>	Fires after the current item is changed.

Methods

next
Navigates the ScrollView to the next item.

prev
Navigates the ScrollView to the previous item.