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

Rob
Userlevel 6
  • Rob
  • Former Unbouncer
  • 198 replies

tips-scripts-banner

Big and bulky image sliders that draw a lot of attention tend to actually hurt conversion rates (Item number 1 in this article) and aren’t something we generally recommend for landing pages.

But that’s not going to dissuade you is it? 😏 We were prepared for that…

Introducing Box Widget Carousels in Unbounce 📈 :spinbounce:

8

Maybe you want to cycle through some testimonials below the fold to make the page cleaner? Or perhaps you’d like to have a rotating sub headline to free up some space while still saying what you want to?

There are a few small and effective ways to utilize the cycling of elements on a page that come to mind. Please though I beg you, don’t make this the focal point. This is one of those things that would be good to test before adopting. 💯

Below you’ll find some code that will allow you to place items in a box on your Unbounce page and have them automatically cycle with a fade effect, showing one at a time.

You can see this in action (built in Unbounce) here:
http://unbouncepages.com/auto-element-cycle/

How to Install in Unbounce

👇

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1.

Place a box widget on the page, this is going to contain the elements you’d like to cycle through. Make note of the ID of the box, we’ll be using it in the javascript.

Step 2.

Add your content to the box and make sure it is nested (the inside of the box will turn checkered). You can nest images, text, or even other boxes if you’d like to cycle through both images and text together. The script will automatically centre all items in the middle of the box.

Step 3.

Add the jQuery v. 2.2.4 CDN link in the javascript section and set the placement to head.
You can find that here: https://code.jquery.com
Make sure to uncheck the jQuery 1.4.2 box in the javascript section of the page builder

Step 4

Auto Cycle
Add the auto-cycle-elements javascript to your page. Change the ID in the script to match the ID of your containing box. Edit the time to control how long each element is visible for. The default is 2 seconds.
https://gist.github.com/RobertCam/c4742be4edb082b09fc23e98bfa6db1c

On Click
in order to allow the user to control the changing of the elements use this adapted script. Don’t forget to add some buttons to trigger the elements changing and add the IDs of those buttons into the script where indicated.
https://gist.github.com/RobertCam/e50e0223ff348d1db3947b18789caa80

💡 Tip: If you’d like to have multiple boxes cycle elements simply duplicate the script and change the ID for the containing box.

Step 5

Done! Go Celebrate, but keep an eye on that conversion rate!


Can’t see the instructions? Log in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

241 replies

Rob
Userlevel 6

Happy to take a look for you @calvinquantum if you’re still having some issues. Could you share the page and I’ll see what I can dig up for you.

M

Hey there Rob!

Can you please link me to the script you use in order to make the carousel a click through.This will be two images, and I’d like for the customer to click to go back and forth between the two.

****never mind found it in the comments!

T

@Rob that page’s content has changed and is almost live, that’s probably why you can no longer find it. For future landing pages, could you possibly outline in more depth the process of creating an On Click Carousel? For example:
where to place the left and right carousel arrows so they don’t get centered in the box widget
which jQuery v. 2.2.4 code should be used: uncompressed or minified?

Thanks for your time 🙂

Rob
Userlevel 6

Hi @tierra for sure I can help with those questions 🙂

You’ll want to place the left and right buttons outside of the box widget that the contains the content to cycle through. If they are placed in that box they will be treated like the other content and hidden on page load, which makes it impossible to click them so the code never executes. If they are outside the box though you’re all good!

For jQuery I’d recommend calling in the minified version simply because it will load faster. Ultimately though they will both work so it’s up to you. In this context there is no advantage to using the uncompressed version though so probably better to use the minified version.

Hope this helps!

T

Thanks Rob! I’ll try this out!

Moclin

Hello @Rob

I have implemented the javascript on one page and it works fine in preview mode but does not work in live mode.

I spoke to livechat about it but they told me to reply to this thread.

Please can you help?

Landing page link http://bit.ly/2o0eUsu

Thanks

Anthony

abraham

@Moclin

We had the same issue today. I had to uncheck “Jquery 1.4.2” under script libraries section on the same script window where you added the jQuery 2.2.4 code. the two versions were causing a conflict.

@Rob

The left “back” button is advancing the slides forward same as the right “forward” button. how can I fix this so the left “back” button does the opposite?

example link (slider is on logos at bottom of page): https://b2b.smartsearchmarketing.com/carousel-issue/

Rob
Userlevel 6

Hi @Moclin looks like the issue on the page is the same as what Abraham ran into earlier. If the 1.4.2 box is checked it can lead to conflicts between the two versions of jQuery. Let me know if unchecking that box does’t resolve the issue for you though.

Rob
Userlevel 6

@abraham I just had a quick look at the page and to be honest I’m not entirely sure why that button isn’t working as expected. The code looks good on the page and there are no errors I’m seeing, so this is definitely a strange issue.

Could you try re-adding the buttons in the builder and changing the IDs in the script for the new buttons. The classic turn it off and back on again approach. If that doesn’t work I’ll take another look for you!

Moclin

Thank you @abraham and @Rob. This has solved the issue 🙂

Moclin

Is there a way to combine multiple carousels in one javascript code? Thanks

abraham

sorry for the delay, I re-added the buttons and changed the ids in the script for the new buttons but the issue still persists - left back button advances the slides same as the right button.

any other thoughts? any example page where the back button is working correctly?

Rob
Userlevel 6

Hi @abraham, I’ll have another look for you as soon as I can. I’ll also DM you with a download of my example page where it is working so you can have a working example in your account.

M

Hi @Rob, How do i remove the delay at the end of the autocycle? once the images stop, it takes a while before it restarts. I have tried editing some of the code but no luck.

Best, Michael

Rob
Userlevel 6

hey @mike_gee there shouldn’t be any extra delay at the end of the images. Usually that’s a result of an extra box with no content not being nested as intended in the main box. Could you share a URL for the page and I can take a look?

You can change the delay time though by changing the “time” variable in the auto cycle code. That will change the delay for all the nested content though, not just the end. I’ll have a look at the page and probably have some suggestions for you!

R

Hey Rob,

I added the scripts from steps #3, and #4 separately under the head tag. Is this right?

Not working 😦

A

Hi Rob, more than a year later, I have a question about the carrousel again. I made this page https://www.getfello.com/allefuncties/ with the carrousel. The desktop one is working, the mobile variant not. Can you help me fix that? Is it maybe because I used other pictures in the mobile variant then in the desktop variant (because of different size).

Moclin

Hey,

I had two carousels working on this page but since I added two more, one of the original carousels has stopped working and only one of the new ones works. So two work and two don’t.

https://www.lancashireresinworks.co.uk/

I copy and pasted the scripts and changed the #lp-pom-box- ID for the new boxes. I made sure the images were placed inside each box as per the instructions.

Any ideas?

Thanks

H

if only you could create a video tutorial for this. That would be so easy and will avoid too many questions.

M

I can’t get this to work for the life of me. I’ve triple checked that the jquery link & javascript are added (and added correctly). But no matter what I do, the only thing that displays in the box widget is the last thing placed in the box. I’ve placed 2 boxes inside my box widget and whichever one is put in first is ignored and whichever one was placed in last displays. When the right button is clicked it switches to white rather than displaying the other nested box.

H

I feel you bro… This tutorials/instructions are for educated people who reads and understands codes not for us dummies who really have no experience on coding and just want to DIY everything ourselves. T_T

A

Hi Rob! Please help: I’m having issues with the carousel box: https://offers.piquetea.com/goh-2free/

It has messed up my landing page like my fonts. I did follow all the instructions correctly to make the images move on click but it’s not working. Could you please help?

Thanks!
Alyssa

Joey-ITVibes

Hey @Rob,

This is a great feature!

I have tried to implement this for the testimonials section using on click advancement. I have 8 testimonials, but only 1 shows and the arrows to advance to the next testimonial don’t appear either.

https://www.aquascapespools.com/channel/custom_pools/

I put the JQuery script in the head… and I put the on click script before the body end tag and changed out the box ids.

What have I done wrong?

Hristian
Userlevel 7
Badge +3

Hey @Joey-ITVibes,

This community is for support of Unbounce customers and their Unbounce landing pages.

That’s probably the reason the script doesn’t work for you - it’s coded and intended to be used with an Unbounce landing page.

Best,
Hristian

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

It is an Unbounce landing page.

Reply


Terms & ConditionsCookie settings