[How to] Add an Image/Testimonial Carousel in Unbounce Using A Box Widget


#21

Hey @Rob
Is there a way to control which image/text shows up first? I have 7 text in total, but would need to highlight a couple of text that the user should see first before the others.

Please let me know. Thanks!


#22

Hi @nbanda the order the images appear are determined in the order they are nested in the box widget. So just make sure that first image you want shown is the first one added, and so on and so forth :slight_smile:


#23

@Rob

That’s what I thought too, but whenever I preview it, it doesn’t really do that. It doesn’t even matter if I place it forward or backward, the order is always the same. Perhaps, I’ll just publish it and see if that will make a difference. The subdomain is still propagating, so i’ll wait.

Will update anyone who’s reading this. :slight_smile:


#24

Hey @Rob

I’ve already published the page, but the text do not really show up based on how it is nested. Here’s the link to the page: http://get.weinsteinwealth.com/

I tried to put a text within a box of its own and nest it (was difficult to do it for 7 times), but even then, it wasn’t showing up correctly. Do you possibly have any solution to this?

Will appreciate it a lot.

Thanks!


#25

Hey @nbanda I had a look at the page and you’ll need to remove each text element from the box and re-add them in the order you want to appear. I’ll send you a direct message with some more details on how to do this for your specific page.


#26

Hi Rob,

Thanks for this great tip! I’ve got a couple questions:

  1. I am only using this on mobile and I want to be able to have users swipe side to side to advance instead of auto scroll (bonus points for auto scroll with the ability to swipe back and forth). How can I achieve this?
  2. Adding this broke my Accordion FAQ section on mobile and desktop. How can I fix this? Getting the following error in console:
    Uncaught TypeError: $(...).accordion is not a function at HTMLDocument.<anonymous> (unbouncepages.com/:11205) at fire (jquery-1.12.4.js:3232) at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362) at Function.ready (jquery-1.12.4.js:3582) at HTMLDocument.completed (jquery-1.12.4.js:3617)

Here is the LP: http://unbouncepages.com/test-bus-new-may-19/

Thanks in advance for your help


#27

Hey @Rob just bumping the above question as it looks like you weren’t tagged in it.

Any help would be appreciated.

Cheers,
Zach


#28

Hey @Zach_Moss Sorry I missed your original post here! I’ve had a look at the page and I think the error with the accordion code is being caused by a conflict in the different versions of jQuery being called in on the page. The accordion script is part of the jQuery UI and s using core 1.12.4, the carousel script is using 2.2.4 and the builder jQuery is also being applied (1.4.2). Based on the console error it looks like the accordion() function isn’t supported in the later version of jQuery used with this community code.

My best advice would be to remove the CDN link for 2.2.4. The carousel script should work on 1.12.4.

To be honest I didn’t design this script with mobile in mind so I didn’t include a way to touch swipe on mobile devices unfortunately. I may be able to work this into an update in the future, although I don’t have an immediate solution for mobile swipe at the moment I’m afraid.

A third part carousel/ image slider may be able to achieve this though. I’ve recommended https://flickity.metafizzy.co/ in the past, although this will take some custom setup.

Apologies I don’t have a full mobile solution for what you’re after. If I do manage to find the time to build this in though I will post here about it and let you know!


#30

Im trying to do this, however i dont understand the instructions in step 3.
what do you mean by “add the jQuery v 2.2.4 CDN link in the javascript section”


#32

thanks guys a lot for your really helpful replies, i really appreciate it very much. i curently must stay home searching for hgh reviewer because of my health issues. but in the meantime. i see there are some very good experts in here who can really help. with this in mind, can you people help me if i would have some [How to] questions as well? please? thanks again, found some really useful for me answers here by the way.


#33

Just sent you a DM @Warrhatiou :smiley:


#34

Hi @Dave_Denver You’ll need to use a different version of jQuery than what’s included in the page builder for Unbounce. In order to do this you’ll need to copy/ paste the link for the newer version into the head of the page.


#35

[BUG FIX UPDATE] Hi All! One of my colleagues here at the Unbounce office caught a small bug with the code here. When someone repeatedly clicks the button (for the ‘on click’ version of the script) it can cause some issues. I’ve fixed the issue by disabling the button for a small period of time after it is clicked. I’ve updated the script linked in the original post. So to fix the issue you’ll just need to re-add the script form the github link.


#36

is it possible to download the template, its gone.


#37

Hello, @Rob, I don’t know if it’s the same issue, but in my landing page after I click on the button the auto-cycle keeps going while the image that was shown after the click stays below, so you see two images at the same time.

Could you help with that?

ads.mercedes-benz.bg/trade-in-campaign/

Thank you.


#38

Hi @n_u_jordanov it looks like you’ve got the auto cycle version of the script combined with the on click version? You’ll want to choose one or the other to avoid this.

The auto cycle version can be found here: https://gist.github.com/RobertCam/c4742be4edb082b09fc23e98bfa6db1c

The on click version can be found here:

Hope this helps!


#39

@Rob is it possible to download the template, its gone.


#40

So there isn’t any way to have the autocycle, pause it when a user clicks and resume it after that?


#42

Unfortunately I haven’t built in that functionality @n_u_jordanov, sorry about that. I agree it would be a good improvement though. Originally I wrote the script to simply cycle through text, so to be honest something like that didn’t even cross my mind.


#43

Hey Rob! Any chance you could share this template? Looks like it’s private. Thanks!