background image transitions

Hey guys, i have a simple carousel that cycles through images whenever a button is clicked. One issue is, i'm unable to figure out why my images aren't performing a transition when switched from one to another. I'm using sveltekit with tailwind css here is how my script tag looks like:
let currentImgPage = 0;
let currentImg = MotorcylingJourney[currentImgPage];

const nextImg = () => {
if (currentImgPage === MotorcylingJourney.length - 1) return;
currentImgPage++;
currentImg = MotorcylingJourney[currentImgPage];
};

const prevImg = () => {
if (currentImgPage === 0) return;
currentImgPage--;
currentImg = MotorcylingJourney[currentImgPage];
};
let currentImgPage = 0;
let currentImg = MotorcylingJourney[currentImgPage];

const nextImg = () => {
if (currentImgPage === MotorcylingJourney.length - 1) return;
currentImgPage++;
currentImg = MotorcylingJourney[currentImgPage];
};

const prevImg = () => {
if (currentImgPage === 0) return;
currentImgPage--;
currentImg = MotorcylingJourney[currentImgPage];
};
and my markup looks like this
<div
class="bg-cover bg-center h-[400px] rounded-lg transition duration-500 ease-in-out"
style="background-image: url('{currentImg.imgPath}');"
></div>
<button class="btn" on:click={nextImg}>Next</button>
<div
class="bg-cover bg-center h-[400px] rounded-lg transition duration-500 ease-in-out"
style="background-image: url('{currentImg.imgPath}');"
></div>
<button class="btn" on:click={nextImg}>Next</button>
when i click my "next" button for instance, it never performs any transition
7 Replies
ἔρως
ἔρως2mo ago
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image <-- it isn't animatable well, it technically is, but it's just 0% -> 100%, no inbetween what you can do is to use pseudo-elements positioned behind everything, and then you fade them based on whatever you want by "fade" i mean that you transition the opacity
sohunn
sohunn2mo ago
i'm a little confused, as per https://youtu.be/tXlZCW26bto?si=Puxcw1MaDd48632h at 5:20 how was he able to get the transition to work?
Code Commerce
YouTube
Build a React Image Slider with Tailwind CSS
Build an Image Slider component in React JS styled with Tailwind CSS. ZeroTo Mastery: Master React JS Course - https://bit.ly/Learn-React-JS Complete Web Developer in 2023 - https://bit.ly/Complete-Web-Developer 💻 Solve EDABIT coding challenges - BEGINNER! 💻 https://bit.ly/Code-Challenges 🔥 Connect with me on IG 🔥 https://instagram.com/firecl...
ἔρως
ἔρως2mo ago
¯\_(ツ)_/¯ i will watch later
sohunn
sohunn2mo ago
You don’t have to watch the entire thing, it’s hardly a few seconds
ἔρως
ἔρως2mo ago
i know, but im playing overwatch
sohunn
sohunn2mo ago
Well okay
ἔρως
ἔρως2mo ago
well, i have no idea he doesn't explain anything just spits out code