Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !27529

Carousel crossfade > Prevent the background to be shown when transitioning

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/MartijnCuppens/better-carousel-crossfade into v4-dev Oct 28, 2018
  • Overview 0
  • Commits 2
  • Pipelines 0
  • Changes 4

Created by: MartijnCuppens

When the carousel is transitioning, the background is shown through the images. This PR prevents this from happening by disabling the transition of the carousel item that is fading out and raising the z-index of the carousel item that is fading in. I also needed to raise the z-index of the carousel controls, the indicators had a z-index which was high enough.

I had to add the transition-delay to the getTransitionDurationFromElement function to prevent the classes to be removed too soon. Not sure if we should rename this function to make this clear or not.

Issue: https://getbootstrap.com/docs/4.1/components/carousel/#crossfade

Demo new carousel: https://deploy-preview-27529--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/#crossfade

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/MartijnCuppens/better-carousel-crossfade