Skip to content

S
single-page-application
Commit 8f97e316 authored by ccottier's avatar ccottier
Browse files
Options

added carousel for france

parent bff9ee2a
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 5 deletions
package-lock.json
View file @ 8f97e316
...@@ -434,6 +434,141 @@ ...@@ -434,6 +434,141 @@
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@angular/localize": {
"version": "11.2.10",
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-11.2.10.tgz",
"integrity": "sha512-MjJ5aOumlXZoTTtB2gfy1Y6NZmGjqOUL5t5D3jXaSCl0rUdwDglB35zKYrqRyUYoGoXSdAuZzkLdREinzZz6eA==",
"dev": true,
"requires": {
"@babel/core": "7.8.3",
"glob": "7.1.2",
"yargs": "^16.2.0"
},
"dependencies": {
"@babel/core": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.3.tgz",
"integrity": "sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@babel/generator": "^7.8.3",
"@babel/helpers": "^7.8.3",
"@babel/parser": "^7.8.3",
"@babel/template": "^7.8.3",
"@babel/traverse": "^7.8.3",
"@babel/types": "^7.8.3",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.1",
"json5": "^2.1.0",
"lodash": "^4.17.13",
"resolve": "^1.3.2",
"semver": "^5.4.1",
"source-map": "^0.5.0"
}
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"dev": true,
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"glob": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
},
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"dev": true
},
"yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"dev": true,
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
}
},
"yargs-parser": {
"version": "20.2.7",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
"integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
"dev": true
}
}
},
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "11.2.10", "version": "11.2.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.10.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.10.tgz",
...@@ -7585,6 +7720,21 @@ ...@@ -7585,6 +7720,21 @@
"json5": "^2.1.2" "json5": "^2.1.2"
} }
}, },
"localize": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/localize/-/localize-0.4.7.tgz",
"integrity": "sha1-47aeWsHuR/4hH/B6Arjy6Wm/nPo=",
"requires": {
"commander": "~2.1.0"
},
"dependencies": {
"commander": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.1.0.tgz",
"integrity": "sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E="
}
}
},
"locate-path": { "locate-path": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
......
package.json
View file @ 8f97e316
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
"@angular/router": "~11.2.6", "@angular/router": "~11.2.6",
"@ng-bootstrap/ng-bootstrap": "^9.1.0", "@ng-bootstrap/ng-bootstrap": "^9.1.0",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"localize": "^0.4.7",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"zone.js": "~0.11.3" "zone.js": "~0.11.3"
...@@ -29,6 +30,7 @@ ...@@ -29,6 +30,7 @@
"@angular-devkit/build-angular": "~0.1102.5", "@angular-devkit/build-angular": "~0.1102.5",
"@angular/cli": "~11.2.5", "@angular/cli": "~11.2.5",
"@angular/compiler-cli": "~11.2.6", "@angular/compiler-cli": "~11.2.6",
"@angular/localize": "^11.2.10",
"@types/jasmine": "~3.6.0", "@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"codelyzer": "^6.0.0", "codelyzer": "^6.0.0",
......
src/app/app.component.css
View file @ 8f97e316
...@@ -10,4 +10,10 @@ ...@@ -10,4 +10,10 @@
height: 350px; height: 350px;
width: 350px; width: 350px;
padding-left: 5px; padding-left: 5px;
}
.imgContainer{
display: flex;
justify-content: space-evenly;
width: 100%;
} }
\ No newline at end of file
src/app/france/france.component.html
View file @ 8f97e316
<p>france works!</p> <p>france works!</p>
<div class='imgContainer' > <div >
<img class='img' src='/assets/images/france/france-cafe.jpg' /> <div class="row" style="padding: 20px;">
<img class='img' src='/assets/images/france/france-tower.jpg' /> <div class="col-sm-10">
<img class='img' src='/assets/images/france/france-town.jpg' /> Use Bootstrap carousel in Angular
</div>
</div>
<div class='col-4 france'>
<ngb-carousel>
<ng-template ngbSlide>
<img class= "img"
src="/assets/images/france/france-tower.jpg" >
<div class="carousel-caption">
<h3 style="color: yellow">Eiffel Tower</h3>
</div>
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/france/france-town.jpg">
<div class="carousel-caption">
<h3 style="color: yellow">Town</h3>
</div>
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/france/france-cafe.jpg">
<div class="carousel-caption">
<h3 style="color: yellow">Cafe La Bossue</h3>
</div>
</ng-template>
</ngb-carousel>
</div>
</div> </div>
\ No newline at end of file
src/app/france/france.component.ts
View file @ 8f97e316
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({ @Component({
selector: 'app-france', selector: 'app-france',
...@@ -7,7 +8,12 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,7 +8,12 @@ import { Component, OnInit } from '@angular/core';
}) })
export class FranceComponent implements OnInit { export class FranceComponent implements OnInit {
constructor() { } constructor(config: NgbCarouselConfig) {
config.interval = 2000;
config.wrap = true;
config.keyboard = false;
config.pauseOnHover = false;
}
ngOnInit(): void { ngOnInit(): void {
} }
......
src/polyfills.ts
View file @ 8f97e316
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
/** /**
* This file includes polyfills needed by Angular and is loaded before the app. * This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file. * You can add your own extra polyfills to this file.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment