bonjurmrfirst/angular4-carousel

Animated angular2/4 carousel

angular4-carousel's Issues

Autoplay mobile version

HI

why doesn't work en mobile versions?

Thanks

Angular 4.3.3 Update

When I use with angular 4.3.3 with typscript 2.4.2
I get
Type 'Observable<{}>' is not assignable to type 'Observable'.
Type '{}' is not assignable to type 'boolean'.

In window-width.service.ts file.

breaks my cli

after I installed got this console warning SCRIPT5011: Can't execute code from a freed script. I unistalled the package and the error remained.

Replace .bind() with arrow function to return correct type

In the window-width.service.ts file, replace line 19:
.map(this.assertSize.bind(this, scrollBar))
with:
.map(() => this.assertSize(scrollBar))

After upgrading angular packages and peer dependencies, the build is more strict and does not like returning an Observable<{}> in a function that returns Observable<'boolean'>.

browser issues

Some issues with the next and prev on chrome, samsung tab, some safari mac versions

on ipads after you click the next or previous image the image carousel stops looping.

Also seems not natural the scrolling of images, seem's like if there is a friction, is not smooth.

The carousel crash the app or browsers in all mobiles and tablets. Maybe there is a memory leak somewhere.

How to start autoplay dynamically?

Hey!

My initial config is this:

public config: ICarouselConfig = { verifyBeforeLoad: true, log: false, animation: true, animationType: AnimationConfig.SLIDE, autoplay: false, autoplayDelay: 4000, stopAutoplayMinWidth: 768 };

I want to enable autoplay when a user clicks a button.
I tried setting this.config.autoplay = true, when user clicks the button, but it doesn't seem to work.

Not responsive and not fit for other size

Error: Uncaught (in promise)

core.js:1350 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'APPEAR' of undefined
TypeError: Cannot read property 'APPEAR' of undefinedpublic config: ICarouselConfig = { verifyBeforeLoad: true, log: false, animation: true, animationType: AnimationConfig.APPEAR, autoplay: true, autoplayDelay: 2000, stopAutoplayMinWidth: 768 };

trying use SLIDE / APPEAR/SLIDE_OVERLAP

nothing works any idea ?

Error: Unexpected value 'CarouselModule' imported by the module 'PropertylistModule'. Please add a @NgModule annotation.

Hello ,

I am using angular4 - carousel for my angular 4 project , I have follow all steps as described ,

But I get below error
Error: Unexpected value 'CarouselModule' imported by the module 'PropertylistModule'. Please add a @NgModule annotation.

How can I resolve It?

@angular/cli: 1.2.7
node: 6.10.2
os: win32 x64
@angular/animations: 4.3.4
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.2.7
@angular/compiler-cli: 4.3.4

The carousel wont let me use height in percentages

When I try to input a 100% value into the height attribute, the carousel doesn't show on the page, when trying to use a pixel value, the carousel wrapper extends far beyond the image.

http://prntscr.com/in6e8l <- this is the issue when using pixel value

http://prntscr.com/in6ehs <- this is the issue when using percentage value.

I hope you reply soon with an answer, thanks!

Carousel height fixed to 400px

Carousel height should be dynamic.

carousel-wrapper[_ngcontent-c15] {
position: relative;
height: 400px;
overflow: hidden;

Is this component responsive?

I checked Demo Page it seams the component is not responsive, Is this component responsive?

Add support for dynamic input data

Consider implementing OnChanges in order to reinitialize the input data when an @input() property such as sources (the array of images), or the configuration.

I've accomplished this by simply calling this.initData() when any @input() changes:
ngOnChanges() {
this.initData();
}

Issue with ng build on window-width.service.ts line 17

when I try to build the app with ng build, I am facing with error
/angular4-carousel/src/app/services/window-width.service.ts (17,5): Type 'Observable<{}>' is not assignable to type 'Observable'.

I have change the line 14 from
public onResize(minWidthBreakpoint: number, scrollBar?: boolean): Observable {
to
public onResize(minWidthBreakpoint: number, scrollBar?: boolean): Observable<boolean | {}> {

now its working

Multiple carousels at one page

Maybe you noticed a problem with adding multiple components into a single page? In my case all images are loaded in one carousel, other two are empty.

Angular 5 support

Please add support for the new Angular 5.1

Javascript file in the package.

Hi,

 Just want to ask if there is an included javascript file in the package?

Thanks!
Jude Alquiza.

how to remove the bullet at the bottom of images

How can i change color of the bottom circles

Tried to place this in component level css

.carousel-nav-list__item--current[_ngcontent-c3] {
    background-color: green !important;
    opacity: 1;
}

Is it possible to override the styling ?

image not a responsive

hello..
I have a issue The Carousel image is not responsive please provide me solution for that

Angular4-carousel is not working with angular 5

I'm stuck here, and i need to use slider in my angular5 project but while running the server after installing carousel its throwing error:

ERROR in ./node_modules/angular4-carousel/index.ts
Module build failed: Error: D:\Workspace\ntwine\node_modules\angular4-carousel\index.ts is not part of the compilation output. Please check the other error messages for details.
at AngularCompilerPlugin.getCompiledFile (D:\Workspace\ntwine\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:649:23)
at plugin.done.then (D:\Workspace\ntwine\node_modules@ngtools\webpack\src\loader.js:467:39)
at process._tickCallback (internal/process/next_tick.js:103:7)
@ ./src/app/app.module.ts 12:0-51
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Failed to compile.

ERROR in ./node_modules/angular4-carousel/index.ts
Module build failed: Error: /home/sneha/Desktop/projects/mentorzweb/node_modules/angular4-carousel/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (/home/sneha/Desktop/projects/mentorzweb/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:709:23)
at plugin.done.then (/home/sneha/Desktop/projects/mentorzweb/node_modules/@ngtools/webpack/src/loader.js:41:31)
at process._tickCallback (internal/process/next_tick.js:68:7)

Compile error

I followed installation steps and I am getting the following error:

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /.../node_modules/angular4-carousel/node_modules/@angular/core/core.d.ts, resolving symbol CarouselModule in /.../node_modules/angular4-carousel/src/app/index.ts, resolving symbol CarouselModule in /.../node_modules/angular4-carousel/src/app/index.ts

Am I doing something wrong or there is a bug?

Images won't fit to 320x240 carousel

I've used the example code and it works fine with 800x600 carousel. But images won't fit when I change the div size by 320x240 or 480x360. It looks like there is a problem under 640x480, in my case at least.

Upgrade carousel to contain HTML with the Images

Sorry for how it looks, i dont know wall Markdown, but with these simple changes i made i can now add simple html with the carousel, could be great id you add them since your module is awsome

see results here https://bresleveloper.github.io/ng4/Home (main slider and maybe soon to come birthdays)

Changes:

1. SlideComponent:

a. html - change template to
<div [class.slide--hidden-initial]="isHidden" [attr.data-slide]="slideNo">
<img class="slide" [src]="src">
<div *ngIf="HTML" class="slide-html" [innerHTML]="HTML"></div>
</div>
b. ts - add @Input() public HTML: string; to component
c. scss under assets/ - add .slide-html{position: absolute;right: 75px;top: 25px;padding:0 25px;opacity: 0.7;background: white;}
and
@media screen and (max-width: 600px){ .slide-html{ right: 25px; max-width: 50%; } }

2. CarouselComponent
   a. html - add to the HTML attribute like this [HTML]="sourcesHtml[i].html"
   b. ts - add @Input() private sourcesHtml: {}[];
   c. ts add code to begining of initData(){
   if (this.sourcesHtml && this.sourcesHtml.length > 0){
this.sources = [];
for (let i = 0; i < this.sourcesHtml.length; i++) {
this.sources.push(this.sourcesHtml[i]['src']);
if ( ! this.sourcesHtml[i]['html'] ){
this.sourcesHtml[i]['html'] = null;
}
}
}
else {
this.sourcesHtml = [];
for (let i = 0; i < this.sources.length; i++) {
this.sourcesHtml.push('');
}
}
}
   d.

3. usage in component,
   a. data is
   public imageWithHtmlSources = [ {
   src : 'https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAx6AAAAJGRmZDRjNzMyLThmODQtNDljZi1iMWU2LWVmYTFjZWZhYjZjMg.jpg',`
   html: '<h3>Go Find God</h3><p>yes you should do that it will make you happy believe me i love you</p><a href="#">read more...</a>'
},
   b. in <carousel [sourcesHtml]="imageWithHtmlSources" ..>

enableProdMode() called from app/index.ts no matter what

Why is this call here? It does not make sense to me. PR submitted: #8

Using two carousels on the same page breaks the first carousel

If I put two carousels on the same page, the first carousel has only one carousel slide, irrespective of the number of paths given to the carousel. The second one works fine.

How to add Text or Link to Slides

Can I add Custom Text to each Slide?
Or
Link Each Slide to Specific RouterLink?

Importing browser module breaks lazy loading

Browser module should only be imported once in a project, and we should not be doing it here. PR to come

Module Build failure after importing CarouselModule

After installing this library and adding CarouselModule in the imports of app.module.ts, I'm getting a Module Build Failure on ng serve.
node_modules\angular4-carousel\index.ts is missing from the TypeScript Compilation.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library.
It also says please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format https://goo.gl/jB3GVv

Error just importing.

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.0
Node: 8.9.0
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

I've installed the package (npm i --save angular4-carousel) and then import the CarouselModule to app.module as well as add the import { CarouselModule } from 'angular4-carousel'; line.

I get this error:
ERROR in ./node_modules/angular4-carousel/index.ts Module build failed: Error: ~~~\node_modules\angular4-carousel\index.ts is not part of the compilation output. Please check the other error messages for details. at AngularCompilerPlugin.getCompiledFile (~~~\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23) at plugin.done.then (~~~\node_modules\@ngtools\webpack\src\loader.js:467:39) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) @ ./src/app/app.module.ts 14:0-51 @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Any ideas what I'm doing wrong?

Carousel not mobile friendly

I'd like to know if there's any plan of implementing a responsive behavior for the carousel.

Error : Cannot read property 'concat' of undefined

Hi.. I followed your install and setting guid.. but not view the image..
and there were error message on the console.. Check the error and let me know how to fix it..

core.es5.js:1084 ERROR TypeError: Cannot read property 'concat' of undefined
at SafeSubscriber._next (carousel.component.ts:25)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:236)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at Subject.next (Subject.js:55)
at CarouselService.init (carousel.service.ts:26)
at CarouselComponent.ngOnInit (carousel.component.ts:33)
at checkAndUpdateDirectiveInline (core.es5.js:10727)
at checkAndUpdateNodeInline (core.es5.js:12117)

• on this package.json

{
"name": "autocodi.com",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 8080",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.1.1",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@covalent/core": "^1.0.0-beta.3-2",
"angular4-carousel": "^2.2.5",
"angularfire2": "^4.0.0-rc.0",
"core-js": "^2.4.1",
"firebase": "^3.9.0",
"firebaseui": "^1.0.1",
"firebaseui-angular": "^0.2.0",
"hammerjs": "^2.0.8",
"history": "^4.6.1",
"md2": "0.0.19",
"primeng": "^4.0.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.0.2",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}