All Components

ScrollView Overview

The ScrollView displays a collection of images or other content in a horizontal layout with built-in navigation between the items.

Basic Usage

The following example demonstrates the ScrollView in action.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [pageable]="true">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
}

Installation

  1. The ScrollView package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-scrollview
  3. Once installed, import the ScrollViewModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ScrollViewModule } from '@progress/kendo-angular-scroll-view';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, ScrollViewModule]
    })
    export class AppModule {
    }

Dependencies

The ScrollView package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs

Configuration

The ScrollView provides configuration options for:

Enable and Disable Animations

To enable or disable the built-in animations of the ScrollView, configure the animate property. By default, animate is set to true.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [animate]="animate"
    [arrows]="true"
    [pageable]="true">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
public animate: boolean = true;
}

Enable and Disable Arrows

To enable or disable the built-in navigation arrows, configure the arrows property. By default, arrows is set to false.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="arrows">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
public arrows: boolean = true;
}

Enable and Disable Paging

You can enable or disable the built-in paging functionality of the ScrollView through the pageable property. By default, pageable is set to false.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [pageable]="pageable">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
public pageable: boolean = true;
}

Enable and Disable the Endless Scrolling Mode

The endless scrolling mode loops the ScrollView items in an endless fashion. To enable or disable the endless scrolling mode, configure the endless property. By default, endless is set to false.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [endless]="endless">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
public endless: boolean = true;
}

Specify the Width and Height

The ScrollView enables you to specify the width and the height of the component through its width and height properties. You have to set both properties because they do not have configured default values.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
}

Provide Data Sources

The ScrollView allows you to provide the data source for the component through its data property.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
}

Set Active Items

You can set the active item of the ScrollView through the activeIndex property. By default, activeIndex displays the first item.

@Component({
  selector: 'my-app',
  template: `
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [activeIndex]="activeIndex">
      <template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </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: 'http://bit.ly/2cJjYuB' }, { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
{ title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }];
public width: string = "600px";
public height: string = "400px";
public activeIndex: number = 1;
}

Keyboard Navigation

For more information on the keyboard shortcuts the ScrollView supports, refer to the article on keyboard navigation.

Accessibility

For more information on the accessibility features of the ScrollView, refer to the article on accessibility.

In this article