[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

Z

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

Any help would be appreciated.

Cheers,
Zach

Rob
Userlevel 6

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!

Dave_Denver

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”

W

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.

Jess
Rank
Userlevel 7
Badge +1

Just sent you a DM @Warrhatiou 😃

Rob
Userlevel 6

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.

Rob
Userlevel 6

[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.

C

is it possible to download the template, its gone.

N

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.

Rob
Userlevel 6

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!

C

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

N

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

Rob
Userlevel 6

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.

liz_baglivo

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

U

Hi @Rob,
I’m having trouble with the on-click script. I’ve nested a left and right button in the box, but neither appears - and the slide show doesn’t go. Do I need to point the buttons somewhere? (Currently set, in Unbounce, to ‘go to a URL’ - left blank, buttons ids have been added to the code ie #lp-pom-button-148, #lp-pom-button-149
Dreamweaver suggests that this ‘var container = $("#lp-pom-box-134");’ is a syntax error in the code but, same line works in the autocycle (box-134 is my box).
Also, auto-cycle finishes on an blank box - cycles back to the first slide after a delay- is there a way around this? (Late edit: Fixed this by putting an image as the background for the box, so it looks like the last slide. Still no controls though)

U

Hi again @Rob,
Managed to sort it out. Buttons needed to be ‘outside’ the box.

E

@Rob Hi! I’m having an issue with this code since both buttons seem to go in the same direction, which is forward, no matter if I click left or right, is there a fix for this? I need a little help with it. Thanks in advance

(my link so you can check out: https://try.idea180.com/4647pinetreedr/ )

U

Hi @Enrique_Pinedo,
We had the same issue. There is a slight error in the code. You just need to change:
function cycleTimeLeft() {
cycleRight(allEls, time);
(left).off('click'); setTimeout(function() { (left).on(‘click’, cycleTimeLeft);
}, time*3);

to

function cycleTimeLeft() {
cycleLeft(allEls, time);
(left).off('click'); setTimeout(function() { (left).on(‘click’, cycleTimeLeft);
}, time*3);

Cheers

E

@Uniting Thanks! I’m going to change it now 🙂

J

Hi @Rob,
This code is awesome and I’ve used it on almost all of my pages. I’m currently having an issue with the script not executing properly on one of my pages. I’m using it multiple times on the page to open up an image gallery. If you have any idea what could be causing the script to not execute properly and a possible solution that would be awesome! The site I’m having issues with is https://www.abbyy-finereader.com/ in the “What’s New?” and “Why FineReader?” sections.

J

Hi @Rob, or anyone else who may be able to help,

Thank you so much for sharing these steps! I’m having some trouble displaying all of the images nested in the main box. It is only showing one of three images that I have nested in the container. Also when I press the left/right buttons, the main container shows a blank box after fading out. Can you help me identify what I am missing here? You can see my working page here: http://alation.com/test-jl-page-20180108-slider/

Thank you so much, and I hope to hear from you soon…
Janice

J

Nevermind I had 2 conflicting javascript codes - removed one and it corrected the error!

A

Hey @Rob

Just implemented the code, which is great!

What do you need to do so you can get more than one image in the carousel showing at a time? And for the carousel to still cycle through?

Rob
Userlevel 6

HI @Adtrak! Glad you found some use in this workaround 🙂

You can get more than one image showing at a time by nesting them all in a box widget and then nesting that box into the box being turned into the carousel by the code (#boxception).

M

Hi @Rob! I need some help. I was talking to Support on chat before and they redirected me to this article but I’m not very sure this is what I need.
I’m building up a pricing landing page (adding a price table with 3 options). We have clients worldwide and I wanted to know if I can enable somehow a currency switcher. An example: https://unbounce.com/pricing/ => here you guys have done it to compare monthly vs. annual; in my case I want to compare USD vs. GBP.

Can I do this?

Reply


Terms & ConditionsCookie settings