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
  • Issues
  • #20974
Closed
Open
Issue created Oct 22, 2016 by Administrator@rootContributor

Crossfade transition option for Carousel

Created by: kinganu

Hi,

I apologize if this has been asked before, but Im having trouble finding a simple solution to have an image sequence crossfading transition (like carousel with an image fading effect rather than slide, a slow opacity fade into new image (1-3 second animation time) with 5-8 seconds interval between images. Tried tons of examples, bootply, custom ones ppl made, none work for me. I want a smooth, slow crossfade thats enjoyable to watch. Its odd that bootstrap 3 ( i use 3.3.5) has such an easy copy/paste carousel slide, with no CSS needed, yet something comparable like an image fade carousel doesnt exist without convoluted css and js and jquery, media queries and tons of configs which do not work, because of absolute positioning tricks etc. Wish this feature could be added.

Examples of what Im looking for are here (tried them all- doesnt work with my standard carousel:

Demo 3: http://css3.bradshawenterprises.com/cfimg/#cfimg3 http://www.1squarepear.com/_docs/bootstrap_carousel_fade.html https://codepen.io/crashy/pen/JoKMgG

Assignee
Assign to
Time tracking