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

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

@@ -8,6 +8,8 @@ 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 { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
 
 import { ContentSection } from '../../docs/models/content-section.model';
@@ -105,6 +107,20 @@ 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: 'Accessibility',
         anchor: 'accessibility',

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

@@ -8,6 +8,8 @@ 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 { DemoAccessibilityComponent } from './accessibility/accessibility';
 
 export const DEMO_COMPONENTS = [
@@ -22,5 +24,7 @@ export const DEMO_COMPONENTS = [
   DemoCarouselDisableIndicatorComponent,
   DemoCarouselDisableLoopingComponent,
   DemoCarouselSlideChangedEventComponent,
+  DemoCarouselMultilistComponent,
+  DemoCarouselMultilistSingleOffsetComponent,
   DemoAccessibilityComponent
 ];

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

@@ -5,9 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './interval.html'
 })
 export class DemoCarouselIntervalComponent {
-  myInterval = 1500;
-  activeSlideIndex = 0;
-
   slides = [
     {image: 'assets/images/nature/3.jpg'},
     {image: 'assets/images/nature/2.jpg'},

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

@@ -0,0 +1,13 @@
+<div>
+  There is ability to shift slider by one item not 
+</div>
+<carousel [itemsPerSlide]="itemsPerSlide"
+          [singleSlideOffset]="singleSlideOffset"
+          [infinite]="infinite">
+  <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;
+  infinite = 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,20 @@
+<carousel [itemsPerSlide]="itemsPerSlide"
+          [singleSlideOffset]="singleSlideOffset"
+          [infinite]="infinite"
+          [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>
+
+<div class="container" [ngStyle]="{'marginTop': '20px'}">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" [(ngModel)]="infinite">
+      Infinite
+    </label>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-multilist',
+  templateUrl: './multilist.html'
+})
+export class DemoCarouselMultilistComponent {
+  itemsPerSlide = 3;
+  singleSlideOffset = false;
+  infinite = false;
+
+  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'}
+  ];
+}

package.json

@@ -50,7 +50,9 @@
     "serve:dynamic": "node demo/dist/server",
     "build:client-and-server-bundles": "ng build --prod && ng run ngx-bootstrap:server",
     "webpack:server": "webpack --config ./scripts/universal/webpack.server.config.js --progress --colors",
-    "configure-heroku": "node scripts/universal/configure-heroku.js"
+    "configure-heroku": "node scripts/universal/configure-heroku.js",
+    "build.carousel": "rimraf dist/carousel && node scripts/ng-packagr/api ../../src/carousel/package.json",
+    "build.utils": "rimraf dist/utils && node scripts/ng-packagr/api ../../src/utils/package.json"
   },
   "husky": {
     "hooks": {

src/carousel/carousel.component.html

@@ -2,12 +2,12 @@
   <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>
-  <a class="left carousel-control carousel-control-prev" [class.disabled]="activeSlide === 0 && noWrap" (click)="previousSlide()" *ngIf="slides.length > 1">
+  <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 && !infinite" (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>
   </a>
-  <a class="right carousel-control carousel-control-next" (click)="nextSlide()"  [class.disabled]="isLast(activeSlide) && noWrap" *ngIf="slides.length > 1">
+  <a class="right carousel-control carousel-control-next" (click)="nextSlide()"  [class.disabled]="isLast(activeSlide) && noWrap && !infinite" *ngIf="slides.length > 1">
     <span class="icon-next carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>