feat(carousel): allow to display multiple items per one slide

demo/src/app/components/+carousel/carousel-section.component.ts

@@ -1,12 +1,11 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { demoComponentContent } from './carousel-section.list';
 import { ContentSection } from '../../docs/models/content-section.model';
 
 @Component({
   selector: 'carousel-section',
-  templateUrl: './carousel-section.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  templateUrl: './carousel-section.component.html'
 })
 export class CarouselSectionComponent {
   name = 'Carousel';

demo/src/app/components/+carousel/carousel-section.list.ts

@@ -8,6 +8,9 @@ import { DemoCarouselIntervalComponent } from './demos/interval/interval';
 import { DemoCarouselDisableIndicatorComponent } from './demos/disable-indicator/disable-indicator';
 import { DemoCarouselDisableLoopingComponent } from './demos/disable-looping/disable-looping';
 import { DemoCarouselSlideChangedEventComponent } from './demos/slide-changed-event/slide-changed-event';
+import { DemoCarouselMultilistComponent } from './demos/multilist/multilist';
+import { DemoCarouselMultilistSingleOffsetComponent } from './demos/multilist-single-offset/multilist-single-offset';
+import { DemoCarouselMultilistFromIndexComponent } from './demos/multilist-from-index/multilist-from-index';
 import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
 
 import { ContentSection } from '../../docs/models/content-section.model';
@@ -105,6 +108,27 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/slide-changed-event/slide-changed-event.html'),
         outlet: DemoCarouselSlideChangedEventComponent
       },
+      {
+        title: 'Multilist',
+        anchor: 'multilist',
+        component: require('!!raw-loader?lang=typescript!./demos/multilist/multilist.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/multilist/multilist.html'),
+        outlet: DemoCarouselMultilistComponent
+      },
+      {
+        title: 'Multilist Single Offset',
+        anchor: 'multilist-single-offset',
+        component: require('!!raw-loader?lang=typescript!./demos/multilist-single-offset/multilist-single-offset.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/multilist-single-offset/multilist-single-offset.html'),
+        outlet: DemoCarouselMultilistSingleOffsetComponent
+      },
+      {
+        title: 'Multilist Start From Index',
+        anchor: 'multilist-from-index',
+        component: require('!!raw-loader?lang=typescript!./demos/multilist-from-index/multilist-from-index.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/multilist-from-index/multilist-from-index.html'),
+        outlet: DemoCarouselMultilistFromIndexComponent
+      },
       {
         title: 'Accessibility',
         anchor: 'accessibility',

demo/src/app/components/+carousel/demos/index.ts

@@ -8,6 +8,9 @@ import { DemoCarouselIntervalComponent } from './interval/interval';
 import { DemoCarouselDisableIndicatorComponent } from './disable-indicator/disable-indicator';
 import { DemoCarouselDisableLoopingComponent } from './disable-looping/disable-looping';
 import { DemoCarouselSlideChangedEventComponent } from './slide-changed-event/slide-changed-event';
+import { DemoCarouselMultilistComponent } from './multilist/multilist';
+import { DemoCarouselMultilistSingleOffsetComponent } from './multilist-single-offset/multilist-single-offset';
+import { DemoCarouselMultilistFromIndexComponent } from './multilist-from-index/multilist-from-index';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 
 export const DEMO_COMPONENTS = [
@@ -22,5 +25,8 @@ export const DEMO_COMPONENTS = [
   DemoCarouselDisableIndicatorComponent,
   DemoCarouselDisableLoopingComponent,
   DemoCarouselSlideChangedEventComponent,
+  DemoCarouselMultilistComponent,
+  DemoCarouselMultilistSingleOffsetComponent,
+  DemoCarouselMultilistFromIndexComponent,
   DemoAccessibilityComponent
 ];

demo/src/app/components/+carousel/demos/multilist-from-index/multilist-from-index.html

@@ -0,0 +1,14 @@
+<p>
+  You can set specific index to start from it
+</p>
+<carousel [itemsPerSlide]="itemsPerSlide"
+          [singleSlideOffset]="singleSlideOffset"
+          [startFromIndex]="6"
+          [interval]="false">
+  <slide *ngFor="let slide of slides; let index=index">
+    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
+    <div class="carousel-caption">
+      <h4>Slide {{index}}</h4>
+    </div>
+  </slide>
+</carousel>

demo/src/app/components/+carousel/demos/multilist-from-index/multilist-from-index.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-multilist-from-index',
+  templateUrl: './multilist-from-index.html'
+})
+export class DemoCarouselMultilistFromIndexComponent {
+  itemsPerSlide = 5;
+  singleSlideOffset = true;
+
+  slides = [
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'},
+    {image: 'assets/images/nature/3.jpg'},
+    {image: 'assets/images/nature/4.jpg'},
+    {image: 'assets/images/nature/5.jpg'},
+    {image: 'assets/images/nature/6.jpg'},
+    {image: 'assets/images/nature/7.jpg'},
+    {image: 'assets/images/nature/8.jpg'},
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'}
+  ];
+}

demo/src/app/components/+carousel/demos/multilist-single-offset/multilist-single-offset.html

@@ -0,0 +1,14 @@
+<p>
+  There is ability to shift slide not only by amount of all visible slides but also for one item
+</p>
+<carousel [itemsPerSlide]="itemsPerSlide"
+          [singleSlideOffset]="singleSlideOffset"
+          [interval]="false"
+          [noWrap]="noWrap">
+  <slide *ngFor="let slide of slides; let index=index">
+    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
+    <div class="carousel-caption">
+      <h4>Slide {{index}}</h4>
+    </div>
+  </slide>
+</carousel>

demo/src/app/components/+carousel/demos/multilist-single-offset/multilist-single-offset.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-multilist-single-offset',
+  templateUrl: './multilist-single-offset.html'
+})
+export class DemoCarouselMultilistSingleOffsetComponent {
+  itemsPerSlide = 5;
+  singleSlideOffset = true;
+  noWrap = true;
+
+  slides = [
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'},
+    {image: 'assets/images/nature/3.jpg'},
+    {image: 'assets/images/nature/4.jpg'},
+    {image: 'assets/images/nature/5.jpg'},
+    {image: 'assets/images/nature/6.jpg'},
+    {image: 'assets/images/nature/7.jpg'},
+    {image: 'assets/images/nature/8.jpg'},
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'}
+  ];
+}

demo/src/app/components/+carousel/demos/multilist/multilist.html

@@ -0,0 +1,24 @@
+<carousel [itemsPerSlide]="itemsPerSlide"
+          [singleSlideOffset]="singleSlideOffset"
+          [noWrap]="!noWrap"
+          [interval]="false"
+          [startFromIndex]="5"
+          (slideRangeChange)="onSlideRangeChange($event)">
+  <slide *ngFor="let slide of slides; let index=index">
+    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
+    <div class="carousel-caption">
+      <h4>Slide {{index}}</h4>
+    </div>
+  </slide>
+</carousel>
+
+<div class="container" [ngStyle]="{'marginTop': '20px'}">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" [(ngModel)]="noWrap">
+      Infinite
+    </label>
+  </div>
+</div>
+
+<pre class="card card-block card-header">{{slidesChangeMessage}}</pre>

demo/src/app/components/+carousel/demos/multilist/multilist.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-multilist',
+  templateUrl: './multilist.html'
+})
+export class DemoCarouselMultilistComponent {
+  itemsPerSlide = 3;
+  singleSlideOffset = false;
+  noWrap = false;
+
+  slidesChangeMessage = '';
+
+  slides = [
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'},
+    {image: 'assets/images/nature/3.jpg'},
+    {image: 'assets/images/nature/4.jpg'},
+    {image: 'assets/images/nature/5.jpg'},
+    {image: 'assets/images/nature/6.jpg'},
+    {image: 'assets/images/nature/7.jpg'},
+    {image: 'assets/images/nature/8.jpg'},
+    {image: 'assets/images/nature/1.jpg'},
+    {image: 'assets/images/nature/2.jpg'}
+  ];
+
+  onSlideRangeChange(indexes: number[]): void {
+    this.slidesChangeMessage = `Slides have been switched: ${indexes}`;
+  }
+}

demo/src/app/docs/api-docs/sample-box/sample-box.component.ts

@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'ng-sample-box',
-  templateUrl: './sample-box.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  templateUrl: './sample-box.component.html'
 })
 export class SampleBoxComponent {
   @Input() ts: string;

demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import sdk from '@stackblitz/sdk';
 
@@ -12,8 +12,7 @@ import { getComponentClassName, getTagName, getTemplateFileName } from './stackb
 
 @Component({
   selector: 'examples',
-  templateUrl: './examples.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  templateUrl: './examples.component.html'
 })
 export class ExamplesComponent {
   examples: ComponentExample[];

demo/src/app/docs/demo-section-components/demo-top-section/demo-top-section.component.ts

@@ -1,11 +1,10 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 import { ContentSection } from '../../models/content-section.model';
 import { ComponentsTopSection } from '../../models/components-top-section.model';
 
 @Component({
   selector: 'demo-top-section',
-  templateUrl: './demo-top-section.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  templateUrl: './demo-top-section.component.html'
 })
 export class DemoTopSectionComponent {
   sectionContent: ComponentsTopSection;

demo/src/app/docs/docs-section/docs-section.component.ts

@@ -1,9 +1,8 @@
 import { ContentSection } from '../models/content-section.model';
-import { ChangeDetectionStrategy, Component, Injector, Input, ReflectiveInjector } from '@angular/core';
+import { Component, Injector, Input, ReflectiveInjector } from '@angular/core';
 
 @Component({
   selector: 'docs-section',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ng-container *ngFor="let section of content">
       <ng-container *ngComponentOutlet="section.outlet; injector: sectionInjections(section)">

demo/src/polyfills.ts

@@ -19,6 +19,5 @@ import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
 import 'classlist-polyfill';
-
 // import 'intl';
 // import 'intl/locale-data/jsonp/en';

src/carousel/carousel.component.html

@@ -2,7 +2,7 @@
   <ol class="carousel-indicators" *ngIf="showIndicators && slides.length > 1">
     <li *ngFor="let slidez of slides; let i = index;" [class.active]="slidez.active === true" (click)="selectSlide(i)"></li>
   </ol>
-  <div class="carousel-inner"><ng-content></ng-content></div>
+  <div class="carousel-inner" [ngStyle]="{'display': multilist ? 'flex' : 'block'}"><ng-content></ng-content></div>
   <a class="left carousel-control carousel-control-prev" [class.disabled]="activeSlide === 0 && noWrap" (click)="previousSlide()" *ngIf="slides.length > 1">
     <span class="icon-prev carousel-control-prev-icon" aria-hidden="true"></span>
     <span *ngIf="isBs4" class="sr-only">Previous</span>
@@ -12,3 +12,5 @@
     <span class="sr-only">Next</span>
   </a>
 </div>
+
+