13 replies

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

KP-C

Kevin Powell - Community•2y ago•

13 replies

sohunn

background image transitions

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

background image transitions

Similar Threads

background image transitions

Similar Threads

Similar Threads

Similar Threads