Hi @MRubio-ED I haven’t created anything like this I’m afraid and I’m not aware of any current workarounds that will achieve this specific functionality. Sorry about that!

Doing some cursory research it looks like there are some pre built solutions to this, although they would require some custom code and some knowledge of javascript. If you have anyone on your team that knows javascript this might help getting started: http://openexchangerates.github.io/money.js/

Sorry I don’t have a better answer for you on this.

Hi @Rob

When I asked Unbounce for such feature they immediately sent me this link. Thank you for writing the codes for us to use! I installed the codes and JQuery 2.2.4 (head) as you instructed but somehow neither of the images nor the testimonials are rotating. I don’t know if there’s any conflict so I can’t see the effects. I also want to set the background of box for the testimonials transparent so it’s not a white box on top of the dark image. Could you please let me know what went wrong with my codes? The link is www.thedocteur.com

Thank you.

Hi @ellie you caught me at a good time!!

I just had a look and there was an issue with the jQuery 2.2.4 script tag in the head. To be honest I’m not entirely sure what the issue was but I saw the warning in the page builder and repasted it in and that seemed to fix the issue.

Sometimes quotation marks end up getting swapped for “curly” quotes when pasting text between different web properties which could explain the issue. Either way though the script looks to be working now! You can check it out in Preview mode and if you’re happy go ahead and republish 🙂

All the best

Hi @Rob Interesting! the image does rotate now!

However, somehow the box for the testimonials is still white instead of transparent even after I remove the quotation marks. Do you have any solution for this?

Best,

@Rob,

Was wondering if you knew how I could control the order of the images fading in and out. Right now in the box I turned into a carousel I have Box1, Box2, Box3, and Box4 arranged in that order. However when I publish my page it loads as Box1, Box3, Box4, Box2. Do you know what determines the order of the carousel?

Thanks

Hi @ogkchen The script will display the boxes in the chronological order they added to the box widget the script targets. Not intuitive I know, it’s simply how the page builder compiles the html for a page. If you need to change the order you will need to ‘unnest’ the boxes and re-add them. The easiest way to do that is probably to copy them and then delete them one at a time and re nest them in the order you need them to display.

Pretty tedious I know, sorry about that. It’s the only way to control what order things are nested in the builder though unfortunately.

Let me know if you hit any snags.

@Rob Thank you for the code. But I do have a question. I have multiple things inside the box that i am using. The first image shows up fine, but when i click a button to go to the next image, the first image fades away and all I am left with is just a white box. Any idea why the second image insnt appearing?

Thanks,

Collin

@Rob I got it to work! Thank you. My next question is, is there a way to add a pause button on the carousel? Or is there a way to combine both auto cycling and on click settings?

hey @ogkchen unfortunately I haven’t built this into the workaround. Sorry about that. Not sure if I’ll have the time to work it in, but if I do I’ll let you know.

Hi @cribar1234 can you make sure that all the content is only nested one level deep in the box you are using. Keep an eye out for content nested inside other content in the box. Feel free to share the page URL as well and I can take a closer look for you.

I am not a developer but I like the idea of adding this feature to our landing pages. I was able to get it to work but I am struggling with allowing the user to control the changing of the elements. Could you provide some additional information on how that works?

@Rob is there a way to modify “on click” so that i have multiple buttons a user can click, and when they click for example button C, then carousel piece C cycles in? use case would be using this as an alternative to a long landing page where buttons jump down the page. instead buttons bring up the content inside the carousel.

also, is there a way to make it so that the carousel doesn’t move at all unless a button is clicked (disable autocycle)

anyone could help me. My script doesn’t works

https://app.unbounce.com/2356462/pages/66070fa1-af61-4752-99c1-476874742417/preview?variant_id=150641111#mobile

hi @sgro28 unfortunately I haven’t built that functionality into this script. It’s a fantastic idea for an improvement though! If I ever manage to get it built in I’ll update this thread.

The “on click” version of the script doesn’t have the auto cycle functionality, so using that version of the script should solve that issue for you. You can find that here https://gist.github.com/RobertCam/e50e0223ff348d1db3947b18789caa80

If you do need the ability to navigate directly to specific content you may want to consider a third party carousel. This would require custom html and css though. https://flickity.metafizzy.co/ is a good option if you want to go that route.

Hi @Betolima I just had a look at your page and it I can see you’ve got the script working, nice job!

One bit of feedback I have though is that the buttons to cycle through on mobile are pretty small and hard to see. You could make them a bit bigger and move them underneath the content that needs to be cycles through for mobile to make it a bit easier for visitors. Just a thought though and some unsolicited advice, feel free to ignore me 🙂

@Rob Hi, I am using both versions of the script, trying to find the one that works best for my client. But, I think he wasn’t the onclick version to work, but I can’t get it go. I’ve tried everything, even updated my jquery to the newest version. Any help would be appreciated. If you send me a PM I will send you the address.

Hello all. I might be a little late to the game - just saw this and it’s awesome!

I’m currently encountering a small hiccup, where on mobile, the text is too wide and causes it to appear to the sides of the screen. Is there any way to properly resize this?

I’ve tried changing the text size, box size, and even messing with the visibility on mobile versus desktop but maybe I’m not doing it right. Would truly appreciate your help, @Rob or anyone who might know a fix!

Thank you in advance 🙂

Hello Everyone!

Loving this post - but I am a total dunce.

Cannot get this script to work 😦

Can you someone hold the hand of a newbie and give a complete example of this script in action?

I need a plug and play version 🙂

@Rob need a little help. Trying to mimic the on-click functionality on a landing page. Created a large box, nested elements (all except my buttons), and added the necessary codes, but still nothing works in preview mode or when I publish. Here’s a link to my page: http://unbouncepages.com/banner_health_womens_institute/

Just hoping a community member or the publisher of this doc might be able to help me figure out a way to instead of having previous / Next buttons style set up, instead have thumbnails below the slide show of each image and if you click one of the thumbnails it changes the slide show to the corresponding image.

Would love a solution to this idea if possible.

all the best guys and great work and collaboration here love it!

-Jeff

This is terrific! Thank you!

@Rob Hello, how are you? Sorry for my english, I’m using a translator!

I have a page https://eventos.americahall.com.br

We set up some slides, the page keeps rotating photos continuously. I made a new variant of this page the client would like form on top. After saving these changes, the slides no longer work.

In preview the slides work normally, but when I open the page in my browser, the slides do not run.

I followed all the steps, and everything was working normally, after I made a new variant to test the form, it stopped everything! Is there a conflict between the pages? I have variant A and variant C

Hi @Maestro_do_Adwords I just checked the page and the code looks to be working ok for me. I can see the images swapping. This is what it’s looking like for me, let me know if you are seeing anything different or if this isn’t the intended outcome of the code: https://www.screencast.com/t/00uOBC5Xemd

Hi @tierra so sorry for the late reply here. I just checked your page and I can see the code is targeting “#lp-pom-box-989” but I wasn’t able to find that box on the page. Could you let me know which part of the page you’re wanting to use the code on and I’ll take a peek for you.

It won’t be another month until I reply either, promise.

hi @Rob_Ferguson I’m suuuuper late to this apologies. Absolutely send me a PM if you still need some help!