ivylaboratory/angular-carousel

A simple solution for horizontal scrolling images with lazy loading

angular-carousel's Issues

Get runtime error when clicking prev & next button.

If I pass template into carousel, will get following error when clicking prev & next button.
ERROR TypeError: Cannot read property 'length' of undefined at Carousel.get lastCellIndex [as lastCellIndex]

How can i disable swipe event?

i would want to disable swipe event.
How can i do that?

carousel active when there is only one image

Hi,

I have a problem when for some movies only 1 image is fetched from API, but carousel is displaying right arrow and when I click it, of course next slide is empty. If I click even more times the whole carousel goes bananas...

I tried setting [overflowCellsLimit]="1" but that didn't help

Is there some way to disable carousel when there is only one image, but still display that image?

thanks

not able to install on Angular Ivy

I was not able to install the carousel using the sugested npm command. I had to install with the following options:

npm i angular-responsive-carousel --legacy-peer-deps. There are several runtime with this type of installation. Is your software compatiblw with Ivy?

Carousel Still active on Modal Dialog Pop Up

I could not find any documentation on how to hide Carousel on Modal Pop Up. The carousel hides the modal and user can not use it. Please look at the attached image and provide a solution.

Image

Carousel Width 0px

I've downloaded pro v 2.0.4.

I'm using HTML content, and for some reason my <carousel> element style attribute is always explicitly set to width: 0px;. I have tried:

1. styling the carousel element explicity:

<carousel style="width: 100%;">

2. styling the carousel element with scss:

carousel.my-carousel {
  width: 100%;
}

3. providing a width input to the component

<carousel [width]="400">

No matter what I do, the width is always set, at the attribute level, to 0px in the browser.
From the browser inspector:

<carousel _ngcontent-gxh-c153="" class="ng-tns-c153-0 carousel" _nghost-gxh-c151="" style="height: 200px; width: 0px;"></carousel>

Is the carousel not able to work with elements loaded from an *ngFor?
My source:

<carousel>
  <my-html-component  class="carousel-cell" *ngFor="comp in myComponents"/>
</carousel>

Hide arrows when cell count is lower than container width

If possible it would be useful to hide arrows when not needed: so when cells width is lower than available container width

[Feature Request] Click Event

I'd like to change information on screen based on which index is active in carousel.
If carousel component can emit active index when arrow is clicked like @Output clickArrow: EventEmitter<number>, that would be really easy to use.
(Using viewchildren might allows me to do the similar thing, but Output sounds much standard and simple. Also, I want to know the exact timing when index has changed)
How do you think about it?

events not working in 1.3.11 version

hi there
thanks for this great component.

it seems that "events" not working anymore after 1.3.10 version in npm
it's working in 1.3.10 . but in 1.3.11 and newer versions not.

thanks.

How to make the carousel smaller?

I've tried to make the carousel smaller by lowering the height and width of the cells. This leads to smaller images with a lot of space between them. Is it possible to manipulate the transform style on each cell? I've attempted to do so like this but it did not work:

<div class="carousel-cell" *ngFor="let img of imgList; index as index;" [id]="index.toString()" [style.transform]="'translateX(' + index * 110 + 'px) !important;'">

not able to stop autoplay

Hi,
I wanted to add functionality of playing/pausing slideshow on my site, but it looks like once "autoplay" is set to true, if you try to change this attribute with click to "false" there is no effect. Carousel doesn't stop
Is there some workaround?

(events)="handleCarouselEvents($event);" - How do I access just the click event for the imageIndex and not the other events?

Can't set the carousel direction to be right-to-left

I need to set the carousel direction to right-to-left, meaning that the first element is to be on the far right and the scrolling shall be done to the left initially (no loop)

vertical scrolling

It is not possible to verticly scroll ( on mobile ) on the picture.
Is it possible to fix this behaviour?

Horizontal swipe moves the carousel, but when scrolling down, I should be able to scroll to the bottom of the page.
When the images take most of the real-estate this is not good for mobile.

Thank you

Anchor triggered when swiping

I am facing an issue. I have multiple carousel-cell . Every carousel-cell has a anchor tag having some link. When trying to swipe it open the links instead of only swipe.

carousel.currentCellIndex undefined when click.

Error when clicking on image/carousel

error points here: https://github.com/ivylaboratory/angular-carousel/blob/master/src/app/carousel/carousel.component.ts#L274

Possible cause: I checked https://github.com/ivylaboratory/angular-carousel/blob/master/src/app/carousel/carousel.ts but can't find currentCellIndex property.

Carousel returns to start after resize on screen

I put the carousel for the user to easily select some images in a form

but on the mobile when he clicks on an input the default behavior is to open the keyboard for the user to type, and this resizes the height of the screen. At that time the carousel goes back to the beginning. Suggestion is to stay where you are even after resize

attached video
resize-carousel-2020-12-15_11.38.58.zip

autoplay fails when there are only 2 images

When you are in the second image and you must repeat the first image it goes blank

my code:

<carousel class="carousel-card" [loop]="true" [autoplay]="true" autoplayInterval="4000" [dots]="true" [height]="340" cellWidth="100%"> </carousel>

Ignored attempt to cancel

Throwing errors in console:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

 this.handleHorizontalSwipe = (event) => {
    event.preventDefault(); // Here
    this.carousel.handleHorizontalSwipe(event);
};

Angular 7

After importing IvyCarouselModule in my module, it still gives me error in template that carousel is not a known element

[Question] How to style the dots with a different color?

I'm using this carousel, and trying to make the dots grey instead of white, but I'm not having any success doing so.

I've tried to target them with css by targeting the class .carousel-dot-active, .carousel-dot, .carousel-cells.carousel-dot-active, and .carousel-cells.carousel-dot.

I haven't had any luck changing the colors with this method.

Any help figuring this out, or being told it's not possible would be appreciated.

error TS1086: An accessor cannot be declared in an ambient context.

I have just started using this package and when building the website, the following errors are thrown:

From what I've searched, this could be solved by updating Typescript to its latest version. However, I cannot do that since I am running Angular 8. While I plan to upgrade in the near future, is there any temporary fix for the package I could try?

Thanks!

Reload method for carrousel

Right now we don't have an easy way to reload the carrousel and it would be an easy workaorund for many issues people might have.

For example, if you have a list of items and the list is dynamic it'll break.

An way to fix this in a generic way that I didn't fin how to do is to add a reload method to reload the carrousel whenever the new item is added.

Can the carousel only host images?

Would it be possible to have html items? Would be a very nice feature to have

I've got the PRO version. Is it possible to set a custom CSS style on the selected image?

Title property

How can we add title or captions under the images?

Issue : Carousel dots in correspondence with the cards and Carousal Issue In Mobile

Hi Team, following are the issues found in this carousel.

1. Carousel dots in correspondence with the cards : Should Number of cards equal to number of dots.
2. Carousal Issue In Mobile : corresponding dots and click on view more show correspond additional cards.

Need anyone's help .

Thank you.

Swiping the carousel from the last item swipes two slides instead of one

When I am on the last panel of the carousel and I try to swipe left to go to the slide n-1 it goes to n-2 instead. When I do it using the button however it works correctly. The problem is only visible in the swipe.

Carousel loop is not working

I have used 3 images for autoplay but the autoplay end at the third image
my code:
<carousel [cellWidth]="'100%'" [arrowsOutside]="true" [autoplay]="true" [dots]="true" [loop]="true">

Many linting errors in pro-version

I just purchased the pro-version. When I follow the instruction to include this version in my code I can no longer build due to a big amount of warning/errors in the code.

The code doesn't follow basic typescript coding guidelines. To give some examples:

• Inconsistent single / double quote usage;
• missing semicolons;
• var declaration type use where const or let should be use;
• missing type declarations;

I would strongly suggest to use ESLINT on your code.

Updating the carousel on component updates

Is there a fix for updating the carouse on component updates. So far when my component updates with new cells the carousel breaks out and nothing is displayed apart from the nav arrows.
It sucks cos otherwise this package is very good :)

Thanks for the help!

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'width':

In server side rendering(ssr) I got error ERROR TypeError: this.element.getBoundingClientRect is not a function.

I got error
ERROR TypeError: this.element.getBoundingClientRect is not a function
ERROR ReferenceError: MutationObserver is not defined
and
TypeError: Cannot read property 'destroy' of undefined
So can you help me to fix this?

Hide previous next icons when carousel images are less than the container width

On ionChange of carousel 'cellsToScroll' attribute is not working properly

  <form [formGroup]="userInput">
       <ion-item>
         <ion-label position="floating">Cells To Scroll</ion-label>
         <ion-input type="number" min="0" placeholder="Default = 2" formControlName="cellsToScroll"
           (ionChange)="submitUserInput($event.target,'cellsToScroll')">
         </ion-input>
       </ion-item>
     </form>

Steps :

1. Enter number 1 as input and click on the forward arrow to check, then backward arrow from where it starts then enter number 3 as input and follow same procedure then enter number 4 as input and enter number 1 as input and when you click on the forward arrow 'cellsToScroll' starts from 4 ( cellsToScroll= 4).

Similar with loop attribute

   <ion-item>
          <ion-label>Image Loop</ion-label>
          <ion-select interface="action-sheet" formControlName="loop" placeholder="Select One"
            (ionChange)="submitUserInput($event.target,'loop')" cancelText="none">
            <ion-select-option value="true" selected="true">On</ion-select-option>
            <ion-select-option value="false">Off</ion-select-option>
          </ion-select>
        </ion-item>

It's not working on ionChange function.

Is there any way to set a time to start autoplay like after the 3-second autoplay feature starts. I am using the function to start autoplay and it's taking about 1 min to start it but if I initialize it on load then it's working (in a second)

Error ExpressionChangedAfterItHasBeenChecked

I keep getting this error in my console at page load

 <carousel
      [images]="theImages$"
      [objectFit]="'contain'"
      [overflowCellsLimit]="3"
      [cellWidth]="'100%'"
      [margin]="10"
      [height]="300"
      [borderRadius]="10"
      [arrowsOutside]="false"
      [pauseOnHover]="true"
      [autoplay]="false"
      [dots]="true"
      [loop]="true">
    </carousel> 

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'width': '539px'. Current value: '1078px'.
    at throwErrorIfNoChangesMode (core.js:5351)
    at bindingUpdated (core.js:12993)
    at checkStylingProperty (core.js:15794)
    at Module.ɵɵstyleProp (core.js:15683)
    at CarouselComponent_ng_template_5_div_0_Template (angular-responsive-carousel.js:49)
    at executeTemplate (core.js:7329)
    at refreshView (core.js:7198)
    at refreshEmbeddedViews (core.js:8289)
    at refreshView (core.js:7222)
    at refreshEmbeddedViews (core.js:8289)

Why height and width is declared as number? Should be string.

Number only works for "px". As you are doing -

CarouselComponent.prototype.setDimensions = function () {
    this.hostStyleHeight = this.height + 'px';
    this.hostStyleWidth = this.width + 'px';
};

What if we want to use 'vh' instead of 'px'. Or lets just say anything other than 'px', then what? That's why it should be declared as string.

Doesn't work with Angular 11 and universal (SSR)

ERROR TypeError: this.element.getBoundingClientRect is not a function
ERROR ReferenceError: MutationObserver is not defined
TypeError: Cannot read property 'destroy' of undefined

Carousel to react on images list change

It would be good to have reaction for external images list change. Maybe extent ngOnChanges with changes.images, or arm setter with additional update on set?

carousel not showing the data

I have a problem which is I using Carousel and images to create a function.
the function is when I change the data, the image also would be changed.
but when I changed the data, the Carousel it would be white block at first. that I need to open chrome developer, the image that will be showed. and I've try many version, it's all the same result.
my project angular cli : 8.0.2
angular-responsive-carousel: 1.5.11
could you help me fix the issue?
many thanks

the compiler would also show those issue
ERROR in node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(6,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(7,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(8,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(9,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(26,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(27,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(28,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(29,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(30,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(31,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(52,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(53,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(54,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(55,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-responsive-carousel/lib/carousel.component.d.ts(59,9): error TS1086: An accessor cannot be declared in an ambient context.

next() multiple cells

yours methods:

next(length?: number): void;
prev(length?: number): void;

seems to accept an optional parameter length to scroll multiple cells, but it actually doesn't work.

issue in cellwidth

I want celltoShow=5 in large devices and celltoShow=2 in small/medium devices. How can I implement that?

Custom template using lazy loading?

Hi all,

I'm using this carousel, and trying to make a custom template for my image

I'm passing the carousel an array of images to get the images in lazy loading, but the array supports only the path property of the image to be shown.

Is there any way to use both - custom template and lazy loading?
as example, showing the image and label with the image name

Any help would be appreciated.

Carousel loop not working on HTML content

My code:

<carousel #myCarousel style="height: 400px;"
    [cellWidth]="'100%'"
    [arrows]="true"
    [loop]="true">
        <div *ngFor="let project of projects" class="carousel-cell" style="display: flex; height: 50vh;">
                <div class="proj-img shadow" style="background-image: url({{project.img}});"></div>
                <div class="proj-display">
                    <h3>{{project.name}}</h3>
                    <p>{{project.text}}</p>
                    <div class="d-flex flex-wrap justify-content-between btn-container">
                        <button class="main-btn" routerLink="{{project.routerLink}}">Vizioneaza proiectul</button>
                        <h5 class="call-to-action" routerLink="projects">Vezi toate proiectele ></h5>
                    </div>
                </div>
        </div>
    </carousel>

If I use an images array it works, but it doesn't when using custom html and ngFor

dots click event

Is there a way to handle the click on dots with this effect: swipe the slides until the current slide correspond to the dot clicked?

Add support for Angular 9

Getting an error Cannot find module 'angular-responsive-carousel' when installed on a Angular 9 project.

I think it's caused because of the peer deps.
"peerDependencies": { "@angular/common": "~7.2.0", "@angular/core": "~7.2.0" },

Module name on Documentation

Hi, thank you for publishing carousel library! I like your demo.

 import {IvyCarouselModule} from 'angular-responsive-carousel';

  @NgModule({
      imports: [IvyCarouselModule]
  })

I installed the latest version this morning and I could not import module like above in README.
I guess followings are correct.

 import {CarouselModule} from 'angular-responsive-carousel';

  @NgModule({
      imports: [CarouselModule]
  })

(Sorry, I cannot submit PRs to the repository without license due to my company's rule)

Events subscriber not work

(events)="handleCarouselEvents($event)" - subscriber not working

carousel not showing all of the cells

I have a carousel inside a div with a responsive width (approx 800px) and it is not showing all of the cells if the total width of the cells is less than the width of the parent container.

Step to reproduce:

app.component.html

<div class="row">
	<div class="col-md-6">
		<carousel
    		[images]="attendances"
    		[height]="120"
    		[cellWidth]="90"
    	>
		</carousel>
	</div>
</div>

app.component.ts

export class AppComponent implements OnInit {

  attendances: any = [
    { path: 'https://via.placeholder.com/150'},
    { path: 'https://via.placeholder.com/150'},
    { path: 'https://via.placeholder.com/150'},
    { path: 'https://via.placeholder.com/150'},
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

Result:

In theory, there should be 4 images displayed right there

The "back" button does not work if you scroll to the end of the slider and press "forward" one more time.

The "back" button does not work if you scroll to the end of the slider and press "forward" one more time.
Conditions: items - content, quantity - 3 pieces.

An approximate solution is to deny click if this is the end of the slider.