Kevin Powell - Community•4mo ago

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

ἔρως•4mo 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•4mo 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...

ἔρως•4mo ago

¯\_(ツ)_/¯ i will watch later

sohunn•4mo ago

You don’t have to watch the entire thing, it’s hardly a few seconds

ἔρως•4mo ago

i know, but im playing overwatch

sohunn•4mo ago

Well okay

ἔρως•4mo ago

well, i have no idea he doesn't explain anything just spits out code

Gaming

Programming

background image transitions