Funky CSS... i am lost! help me out?

having a rough time… a head scratcher

my code / site:

www.forallthetime.com. see slide show beneath. (please ignore everything else. i am not done, i know things are sloppy right now)

all images slide BUT fig4 goes back to fig1 immediately

also, i copied the code, adjusted the background image for fig5… does not appear

what i am trying to accomplish is this

which has a delay on fig1

i am after both the code to slide AND the code to not slide… an immediate change of background

and timing matches slide to slide

help me out?

MANY THANKS!

Hey @obxjuggler did you copy the code from that Codepen exactly? The animation on the “.slider .carousel” is exactly the timing for the slide that you want to be using. Is it not working for you?

thanks for trying to help me!!!

its not working for me and the codepen is wonky too… smooth transitions UNTL fig4 returns to fig1… where the slide is immediately from fig4 to fig1.

on codepen fig4 and fig1 are the same background

the example can be seen on the codepen above and my site above

here you will see fig4 without animation go back to fig1

AND i cannot figure out how to add another image

author:

to add slides you need create a new div with class “slide” and a new class “fig4” or “fig5” and just copy the code of “fig1”, changing the background of this new “fig”. Don’t need change flex to block. To delete, you must have erase the div that you want to delete and erase the class in the CSS, just to clean the code.

no go

i hope i am helpful!

my apologies if you don’t follow : (

again, thank you!

@obxjuggler I am wondering if you need to repeat that first image like the suggestion from CodePen. From what I can see in your code, you have 4 unique images. Perhaps that is the part throwing off your code.

Try to copy and paste the first div under the 4th and see if that helps you. Just like they do here:

   <div class="slide fig1">
      <h2>AN AMAZING PHRASE</h2>
    </div>
    <div class="slide fig2">
      <h2>ANOTHER PHRASE</h2>
    </div>
    <div class="slide fig3">
      <h2>AND OTHER AMAZING PHRASE</h2>
    </div>
    <div class="slide fig1">
      <h2>AN AMAZING PHRASE</h2>
    </div>
1 Like

MANY THANKS!

issue moot.

i found an easier way!

i do appreciate your help!

1 Like

Thanks, this helped me so much in my project too!

I had the same problem