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

Animation

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

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

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

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

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

Data Providing

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

Active Item

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;
}
In this article