Fade or slide in/out full width carousel

  • 5 April 2017
  • 7 replies
  • 114 views
Tristan_Ramberg

I’ll try to describe my goal as best I can, but what I need to create is 3 unique backgrounds that scale to the full width of the page (very important) and I need them to cycle in the same section (either automatic, by clicking a button or both). I also need separate smaller images on top of the backgrounds to cycle in sync.

For example, the first background could be of a bakery and a sample baking business flyer image floats on top. After pausing several seconds, the bakery background fades or slides out. The second background fades or slides in, of a basketball court, and the sample image fades out/in as a gym membership flyer.
And so on.

The best example of this would be Squarespace: https://www.squarespace.com/

Can anyone help figure this out?

7 replies

Hristian
Userlevel 7
Badge +3

Hi @Tristan_Ramberg,

Due to the way Unbounce pages are technically implemented what you are asking is a bit complicated.

Possible - Yes, but you’ll need to be comfortable writing JS.

I’ve done some similar work so you have a starting point. It would get you half way to where you want to be.

Combine this script from Rob with my own script for full width background images. This way, you’ll have rotating background images on a timer.

Let us know how it works out.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
J

Hi Hristian,

I don’t suppose you have an example of the two combined?

Would be interested to see the ‘full effect’.

Jack

Hristian
Userlevel 7
Badge +3

Hi Jack,

There you go: https://revise.cc/test-full-widht-box-abc123/

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
J

😍

Can’t wait to use this!

Tristan_Ramberg

Hi Hristian, thanks for the quick response.

This helps a lot but I’m having some issues getting it to function correctly.

  1. I’ve opted for an automatic slideshow rather than click through, but it isn’t repeating. It gets to the third background and stops. What do I need to edit or add to the JS to make it repeat?

  2. For some reason my background is pushed about 100px to the right of the left-hand side of the screen and extends the whole page an equal amount out to the right. My box and all of my backgrounds are placed exactly edge to edge inside the section (1280x605) so I can’t figure out why.

  3. Is there a way to scale the images proportionately and mask the excess rather than scale the full image to conform to the height and width?
    The script you provided definitely helps, but as the screen resolution gets higher, the images get more and more stretched to fit.

Hristian
Userlevel 7
Badge +3

Hi @Tristan_Ramberg,

In regards to your 3rd question: Use larger images (at least 1920px width) since it’s a lot easier to scale down then to try and mask the scaling up.

As far as 1 & 2 - Maybe the script is conflicting with something else on the page. I can’t know without looking at the page.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Y

@Hristian - looks like this link is dead. 😦

Reply


Terms & ConditionsCookie settings