This question really got me thinking. It took a bit of time for me to unravel what exactly is happening here.
While exploring Bootstrap carousel, I discovered that it uses transform: translateX(); for its animations.
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
The use of Transform translate effectively moves the fixed background image left or right, even when the background is set to be fixed. This property ensures that the background image remains in place as the element moves, which can sometimes be a bit tricky to work with.
I attempted various methods to manipulate this behavior, such as adding extra divs and child divs for the background, but struggled with understanding how the classes interacted. My goal was to reverse-translate the background image during slide transitions to create the illusion of it being fixed. However, I ran into complications when trying to ensure that the background on the next slide did not animate. It became quite perplexing. I'm unsure how to achieve this effect with a slider that relies on translate for animation.
Perhaps a more ingenious individual will be able to solve this puzzle.