First Carousel slides into view even though transition set to 'crossfade'

[baloo32]

After upgrading "@coreui/angular": "~5.3.8" to "@coreui/angular": "~5.3.10" I've noticed on the first display of a carousel item, the initial slide is animated in from the right hand side.

The element is added as <c-carousel [interval]="interval" [dark]="true" [animate]="true" [transition]="'crossfade'"> and previous version the first slide would just appear in the initial location. Subsequent transitions to other slides correctly crossfade to the next option.

During second and subsequent transitions:

Tested Windows 11 in

Chrome Version 132.0.6834.160 (Official Build) (64-bit)
Firefox 134.0.2 (64-bit)
MS Edge Version 132.0.2957.140 (Official build) (64-bit)

All browser exhibit same behaviour.

Project is Angular 19 (latest), dependencies below:

 "dependencies": {
    "@angular/animations": "^19.1.4",
    "@angular/cdk": "^19.1.3",
    "@angular/common": "^19.1.4",
    "@angular/compiler": "^19.1.4",
    "@angular/core": "^19.1.4",
    "@angular/forms": "^19.1.4",
    "@angular/material": "^19.1.3",
    "@angular/platform-browser": "^19.1.4",
    "@angular/platform-browser-dynamic": "^19.1.4",
    "@angular/router": "^19.1.4",
    "@coreui/angular": "~5.3.10",
    "@coreui/coreui": "^5.2.0",
    "@coreui/icons-angular": "~5.3.9",
    "@ngneat/cashew": "^3.1.0",
    "jquery": "^3.7.1",
    "ngx-cookie-service": "^19.1.0",
    "ngx-markdown": "^19.0.0",
    "marked": "^15.0.0",
    "ngx-pagination": "^6.0.3",
    "reset.css": "^2.0.2",
    "rxjs": "~7.8.1",
    "tslib": "^2.8.1",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.1.5",
    "@angular-eslint/builder": "^19.0.2",
    "@angular-eslint/eslint-plugin": "^19.0.2",
    "@angular-eslint/eslint-plugin-template": "^19.0.2",
    "@angular-eslint/schematics": "^19.0.2",
    "@angular-eslint/template-parser": "^19.0.2",
    "@angular/cli": "^19.1.5",
    "@angular/compiler-cli": "^19.1.4",
    "@types/jquery": "^3.5.32",
    "@types/node": "^22.13.1",
    "@typescript-eslint/eslint-plugin": "^8.23.0",
    "@typescript-eslint/parser": "^8.23.0",
    "eslint": "^9.19.0",
    "prettier": "^3.4.2",
    "ts-node": "^10.9.2",
    "typescript": "~5.5.4",
    "tslib": "^2.8.1"
  }
}

[xidedix]

@baloo32 Thanks for the heads-up!

• Fixed in 5.3.12
  Please let us know if this works for you. If not, reopen the issue.

[baloo32]

Hi, yes this is fixed now - thanks very much...

[baloo32]

Sorry, just found that if transition is now set to slide the initial item will slide in from the right, however the subsquent items don't, they appear on top of the previous item with no animation.

Crossfade works correctly still...

[xidedix]

@baloo32

We cannot reproduce your issue here (ie. subsequent items appear on top of the previous item with no 'slide' animation).
If you’re up for it, we’ll set up a StackBlitz example next week so we can collaborate on resolving this issue.

[baloo32]

Carousel_Slide_Transition.mp4

Attached recording of the slide transition to help explain it better... more than happy to help this week, will be available from Tuesday 11th Feb...

[xidedix]

@baloo32

Feel free to clone the attached example and share a modified Stackblitz link.

https://stackblitz.com/edit/coreui-angular-carousel-zz87p8dx?file=src%2Fapp%2Fapp.component.html

[baloo32]

Forked with error reproduced:
https://stackblitz.com/edit/coreui-angular-carousel-zz87p8dx-lsivjryd?file=src%2Fapp%2Fapp.component.html

If the <a> tag does not have the row class set the transition for slide fails. Confirmed in StackBlitz and on my local development project.

[baloo32]

For the slide transition only, it does require the display: flex option for it to work correctly.

[xidedix]

@baloo32
You’ve identified the issue. The browser initializes the <a> element as display: inline;, which is incompatible with carousel animation.

[baloo32]

Confirmed - adding display: block is sufficient to correct the animation; does seem to be our use case as we are wrapping the entire "contents" of the slide in an anchor tag (to aid user click area to the page to navigate to).... but hopefully will help anyone else using slide transition with a link ;-)