Skip to content

Commit

Permalink
feat(carousel): allow to display multiple items per one slide
Browse files Browse the repository at this point in the history
  • Loading branch information
@musienkoyuriy
musienkoyuriy committed Apr 3, 2019
1 parent 5a3afe3 commit 8b2b997
Show file tree
Hide file tree
Showing 7 changed files with 331 additions and 93 deletions.
144 changes: 72 additions & 72 deletions demo/src/app/components/+carousel/carousel-section.list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,78 +38,78 @@ export const demoComponentContent: ContentSection[] = [
html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
outlet: DemoCarouseBasicComponent
},
{
title: 'Optional captions',
anchor: 'captions',
description: `<p>Add captions to your slides easily with the <code>.carousel-caption</code>
element within any <code>&lt;slide></code>. Place just about any optional HTML within there
and it will be automatically aligned and formatted.</p>`,
component: require('!!raw-loader?lang=typescript!./demos/captions/captions.ts'),
html: require('!!raw-loader?lang=markup!./demos/captions/captions.html'),
outlet: DemoCarouselCaptionsComponent
},
{
title: 'Configuring defaults',
anchor: 'config-defaults',
component: require('!!raw-loader?lang=typescript!./demos/config/config.ts'),
html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
outlet: DemoCarouselConfigComponent
},
{
title: 'Dynamic Slides',
anchor: 'dynamic-slides',
component: require('!!raw-loader?lang=typescript!./demos/dynamic/dynamic.ts'),
html: require('!!raw-loader?lang=markup!./demos/dynamic/dynamic.html'),
outlet: DemoCarouselDynamicComponent
},
{
title: 'Pause on hover',
anchor: 'pause-on-hover',
description: `<p>Click button to pause on hover.</p>`,
component: require('!!raw-loader?lang=typescript!./demos/no-pause/no-pause.ts'),
html: require('!!raw-loader?lang=markup!./demos/no-pause/no-pause.html'),
outlet: DemoCarouselNoPauseComponent
},
{
title: 'Custom content',
anchor: 'custom-content',
component: require('!!raw-loader?lang=typescript!./demos/custom-content/custom-content.ts'),
html: require('!!raw-loader?lang=markup!./demos/custom-content/custom-content.html'),
outlet: DemoCarouselCustomContentComponent
},
{
title: 'Disable slide looping',
anchor: 'disable-looping',
component: require('!!raw-loader?lang=typescript!./demos/disable-looping/disable-looping.ts'),
html: require('!!raw-loader?lang=markup!./demos/disable-looping/disable-looping.html'),
outlet: DemoCarouselDisableLoopingComponent
},
{
title: 'Disable indicator',
anchor: 'disable-indicator',
component: require('!!raw-loader?lang=typescript!./demos/disable-indicator/disable-indicator.ts'),
html: require('!!raw-loader?lang=markup!./demos/disable-indicator/disable-indicator.html'),
outlet: DemoCarouselDisableIndicatorComponent
},
{
title: 'Interval',
anchor: 'slides-interval',
component: require('!!raw-loader?lang=typescript!./demos/interval/interval.ts'),
html: require('!!raw-loader?lang=markup!./demos/interval/interval.html'),
outlet: DemoCarouselIntervalComponent
},
{
title: 'Slide changed event',
anchor: 'slide-changed-event',
component: require('!!raw-loader?lang=typescript!./demos/slide-changed-event/slide-changed-event.ts'),
html: require('!!raw-loader?lang=markup!./demos/slide-changed-event/slide-changed-event.html'),
outlet: DemoCarouselSlideChangedEventComponent
},
{
title: 'Accessibility',
anchor: 'accessibility',
outlet: DemoAccessibilityComponent
}
// {
// title: 'Optional captions',
// anchor: 'captions',
// description: `<p>Add captions to your slides easily with the <code>.carousel-caption</code>
// element within any <code>&lt;slide></code>. Place just about any optional HTML within there
// and it will be automatically aligned and formatted.</p>`,
// component: require('!!raw-loader?lang=typescript!./demos/captions/captions.ts'),
// html: require('!!raw-loader?lang=markup!./demos/captions/captions.html'),
// outlet: DemoCarouselCaptionsComponent
// },
// {
// title: 'Configuring defaults',
// anchor: 'config-defaults',
// component: require('!!raw-loader?lang=typescript!./demos/config/config.ts'),
// html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
// outlet: DemoCarouselConfigComponent
// },
// {
// title: 'Dynamic Slides',
// anchor: 'dynamic-slides',
// component: require('!!raw-loader?lang=typescript!./demos/dynamic/dynamic.ts'),
// html: require('!!raw-loader?lang=markup!./demos/dynamic/dynamic.html'),
// outlet: DemoCarouselDynamicComponent
// },
// {
// title: 'Pause on hover',
// anchor: 'pause-on-hover',
// description: `<p>Click button to pause on hover.</p>`,
// component: require('!!raw-loader?lang=typescript!./demos/no-pause/no-pause.ts'),
// html: require('!!raw-loader?lang=markup!./demos/no-pause/no-pause.html'),
// outlet: DemoCarouselNoPauseComponent
// },
// {
// title: 'Custom content',
// anchor: 'custom-content',
// component: require('!!raw-loader?lang=typescript!./demos/custom-content/custom-content.ts'),
// html: require('!!raw-loader?lang=markup!./demos/custom-content/custom-content.html'),
// outlet: DemoCarouselCustomContentComponent
// },
// {
// title: 'Disable slide looping',
// anchor: 'disable-looping',
// component: require('!!raw-loader?lang=typescript!./demos/disable-looping/disable-looping.ts'),
// html: require('!!raw-loader?lang=markup!./demos/disable-looping/disable-looping.html'),
// outlet: DemoCarouselDisableLoopingComponent
// },
// {
// title: 'Disable indicator',
// anchor: 'disable-indicator',
// component: require('!!raw-loader?lang=typescript!./demos/disable-indicator/disable-indicator.ts'),
// html: require('!!raw-loader?lang=markup!./demos/disable-indicator/disable-indicator.html'),
// outlet: DemoCarouselDisableIndicatorComponent
// },
// {
// title: 'Interval',
// anchor: 'slides-interval',
// component: require('!!raw-loader?lang=typescript!./demos/interval/interval.ts'),
// html: require('!!raw-loader?lang=markup!./demos/interval/interval.html'),
// outlet: DemoCarouselIntervalComponent
// },
// {
// title: 'Slide changed event',
// anchor: 'slide-changed-event',
// component: require('!!raw-loader?lang=typescript!./demos/slide-changed-event/slide-changed-event.ts'),
// html: require('!!raw-loader?lang=markup!./demos/slide-changed-event/slide-changed-event.html'),
// outlet: DemoCarouselSlideChangedEventComponent
// },
// {
// title: 'Accessibility',
// anchor: 'accessibility',
// outlet: DemoAccessibilityComponent
// }
]
},
{
Expand Down
26 changes: 22 additions & 4 deletions demo/src/app/components/+carousel/demos/basic/basic.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,29 @@
<carousel>
<slide>
<carousel [interval]="false" [itemsPerSlide]="3" [infinite]="true">
<slide>0
<img src="assets/images/nature/1.jpg" alt="first slide" style="display: block; width: 100%;">
</slide>
<slide>
<slide>1
<img src="assets/images/nature/2.jpg" alt="second slide" style="display: block; width: 100%;">
</slide>
<slide>
<slide>2
<img src="assets/images/nature/3.jpg" alt="third slide" style="display: block; width: 100%;">
</slide>
<slide>3
<img src="assets/images/nature/1.jpg" alt="first slide" style="display: block; width: 100%;">
</slide>
<slide>4
<img src="assets/images/nature/2.jpg" alt="second slide" style="display: block; width: 100%;">
</slide>
<slide>5
<img src="assets/images/nature/3.jpg" alt="third slide" style="display: block; width: 100%;">
</slide>
<slide>6
<img src="assets/images/nature/1.jpg" alt="first slide" style="display: block; width: 100%;">
</slide>
<slide>7
<img src="assets/images/nature/1.jpg" alt="first slide" style="display: block; width: 100%;">
</slide>
<slide>8
<img src="assets/images/nature/1.jpg" alt="first slide" style="display: block; width: 100%;">
</slide>
</carousel>
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
6 changes: 3 additions & 3 deletions src/carousel/carousel.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 8b2b997

Please sign in to comment.