Header one image, 5 slides

Before update I had, a header slider with one image and 4 textes sliding.
I just put one image on the first and then the differents texts slides on this image.

With the update, If I put only one image, the next text is on a blank background.
If I put the same image 4 times, there is an transition effect between the images.

I just go back with the version, but do I have one solution to do my initial work with this update ?

Thanks

Hello,

I’ve just checked your site and it looks like you have already resolved this issue.

Can you please confirm or deny it?

Kind Regards, Roman.

Hello there,

Thank you for reaching out to us here.

To disable the transition effect between the slide images on the latest version of Sydney, you’ll need to add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.header-slider .slide-item {
  opacity: 1 !important;
}

Regards,
Kharis

Thanks a lot for your answer,
it disables the transition between slides thanks.
But like you can see, now the text doesn’t slide as it should from the side of the screen, it directly appears “almost in the middle”.

I really prefer the other version.
Is it another way to do it ?
No flashing but all the text sliding ?

Thanks,
Bruno

Hello Bruno,

Add this custom CSS code:


.text-slider {
  -webkit-animation-name: unset;
  animation-name: unset;
}

.text-slider {
  -webkit-animation-name: fadeInRightBig2;
  animation-name: fadeInRightBig2;
}

@-webkit-keyframes fadeInRightBig2 {
	0% {
		right: -100%;
	}
	30% {
		right: 0;
	}
	80% {
		right: 0;
	}  
	100% {
		right: 100%;
	}
}
@keyframes fadeInRightBig2 {
	0% {
		right: -100%;
	}
	30% {
		right: 0;
	}
	80% {
		right: 0;
	}
  100% {
		right: 100%;
	}
}

Regards,
Kharis

I try it,

but like you see here:

there is the shining/white effect again
I think this css make nothing

sorry for all that work:-(

Hello there,

Did you remove the code I suggested initially?


.header-slider .slide-item {
  opacity: 1 !important;
}

Regards,
Kharis

I try with and without!

this CSS seems to change nothing:
.text-slider {
-webkit-animation-name: unset;
animation-name: unset;
}

.text-slider {
-webkit-animation-name: fadeInRightBig2;
animation-name: fadeInRightBig2;
}

@-webkit-keyframes fadeInRightBig2 {
0% {
right: -100%;
}
30% {
right: 0;
}
80% {
right: 0;
}
100% {
right: 100%;
}
}
@keyframes fadeInRightBig2 {
0% {
right: -100%;
}
30% {
right: 0;
}
80% {
right: 0;
}
100% {
right: 100%;
}
}

Hello there,

Please try to replace these lines:


.text-slider {
  -webkit-animation-name: fadeInRightBig2;
  animation-name: fadeInRightBig2;
}

with:


.text-slider {
  -webkit-animation-name: fadeInRightBig2 !important;
  animation-name: fadeInRightBig2 !important;
}

Let me know how it goes.

Regards,
Kharis

With this code,

the text appears directly in the middle (dont slide from right anyway)
and then it slides really really really fast to the left.

sorry for all that work:-(

Actualy I just put
following CSS ans the diffrent texts just appears and disappears in the middle:

.header-slider .slide-item {
opacity: 1 !important;
}

.text-slider {
-webkit-animation-name: fadeInRightBig2 !important;
animation-name: fadeInRightBig3 !important;
}

let me know if there is no way to do it like before the upgrade.
Just the text sliding like original on the Theme, ans one image fix in background without flashing.

Or maybe you want to try it directly on the website ?

Hello there,

I am sorry for the delay. Please try this code:


.header-slider .slide-item {
  opacity: 1 !important;
}

.text-slider {
  -webkit-animation-name: unset;
  animation-name: unset;
}

.text-slider {
  -webkit-animation-name: fadeInRightBig2 !important;
  animation-name: fadeInRightBig2 !important;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes fadeInRightBig2 {
	0% {
		right: -1200px;
	}
	50% {
		right: 0;
	}
	60% {
		right: 0;
	}  
	100% {
		right: 1200px;
	}
}
@keyframes fadeInRightBig2 {
	0% {
		right: -1200px;
	}
	50% {
		right: 0;
	}
	60% {
		right: 0;
	}
  100% {
		right: 1200px;
	}
}

Regards,
Kharis

Thanks for your answer.
But stil not working, the text appears in middle and slides really fast to the left.
Instead of sliding from the right and disappears on the middle.

I made a video screenshot to show you the effect.
Can I send it to you?

You can upload your video file to YouTube or cloudup.com, and then share its public link here.

Regards,
Kharis

Hello there,

Thank you for sharing the video file. It really helped me. Please try to replace the custom code I suggested with this one:


.header-slider .slide-item {
  opacity: 1 !important;
}

.text-slider {
  -webkit-animation-name: unset;
  animation-name: unset;
}

.text-slider {
  -webkit-animation-name: fadeInRightBig2 !important;
  animation-name: fadeInRightBig2 !important;
  -webkit-animation-duration: 5s;
  animation-duration:5s;
}

@-webkit-keyframes fadeInRightBig2 {
  0% {
    transform:translateX(100%);
  }
  50% {
    transform:translateX(100%);
  }
  60% {
    transform:translateX(0);    
  }
  80% {
    transform:translateX(0);    
  }
  100%{
    transform:translateX(-100%);
  }
}
@keyframes fadeInRightBig2 {
  0% {
    transform:translateX(100%);
  }
  50% {
    transform:translateX(100%);
  }
  60% {
    transform:translateX(0);    
  }
  80% {
    transform:translateX(0);    
  }
  100%{
    transform:translateX(-100%);
  }
}

Let me know how it goes.

Regards,
Kharis

Still not good,
Seems to change nothing.
Same effect, appearing in the middle and sliding fast to the left.

sorry:-(

On my test site, that code is resulting something like this:

Cloudup

Maybe it hasn’t taken any effect yet on site due to site caching? You might need to flush your site cache (if any). Or, clear your web browser cache, and then reload your site.

Regards,
Kharis