[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

Joey-ITVibes

We are an Unbounce enterprise customer and my Customer Success Manager referred me to this script for the testimonial section of the landing page.

Hristian
Userlevel 7
Badge +3

Hi @Joey-ITVibes,

Maybe you had another link in mind for the landing page because the one you’ve provided is certainly not an Unbounce landing page.

https://www.aquascapespools.com/channel/custom-pools/

Best,
Hristian

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

It was a matter of an underscore vs. a hyphen. I updated the link in the original post. It should be https://www.aquascapespools.com/channel/custom_pools/ I apologize for the confusion.

Hristian
Userlevel 7
Badge +3

It seems the testimonials are working as expected now.

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

Hi — does anyone know how to use the box widget with three buttons. E.g. click on button 1 and it shows image 1 in carousel, click button 2 and it shows image 2 etc… Thanks!

J

Hi @Rob

I have two carousels on my page - 1 for desktop (click) and 1 for mobile (timed).

I’ve tried timed and click for mobile, but I could not get either to work.

Can you please help?

Link - http://unbouncepages.com/basketballhq-all-groups-experts-page/

I receive this error message for the script - https://goo.gl/yzSbFR

Also, where should the script be placed? - Head, Before Body End Tag, After Body Tag? I think updating the instructions to include the placement would be beneficial.

best,
Josh

J

Upon inspecting view-source:http://unbouncepages.com/auto-element-cycle/, I see that the jquery code needs to be placed in the Head while everything else should be placed after the body tag.

Rob
Userlevel 6

Hi @josh360 yep that’s correct. The error in your screenshot points to the issue being that the code is executing in the browser before jQuery loads on the page. Loading jQuery in the head should fix this for you as it will ensure it’s loaded before the script fires on the page. Did loading jquery in the head fix it for you?

J

Yes, thanks for the quick reply.

If the instructions don’t already mention the placements, it may be wise to update them (timer and click) to account for those steps.

Best.

B

Hello, I have been trying to solve the error for 2 days, in the mobile view, my buttons are shown at the top of the page and should be located in the section (blue bg) “ASSIST 365 brinda una cobertura a medida: para cada viajero, en cada viaje” under the container box, What will be the problem? I have reviewed the code 1,000 times without success… HELP PLEASE

https://promociones.landings.com.ar/working-holidays-plantillaoriginal/

J

Hey @Rob Quick question: I wanted to know if you have ever seen images rendering blurry when using this slider code.

I have exported my “slides” aka images in 72, 150, and 300 dpi to test the quality and each time the live slider renders the images low quality or blurry. Any ideas here?

C

Hi @Rob how do I remove the loop (ie. I only want the slideshow to run once?)

Thanks

P

Hi @Rob,

  1. which is the correct code to use? The site listed has an uncompressed and a minified version

  2. With either code, I get the orange triangle warning. Preview just shows a bunch of code, and this is what the published page looks like: https://nyhrc.com/carousel-draft-1/

What am I doing wrong here?

tapmyads

@Rob did you build touch version for mobile on this?

Rob
Userlevel 6

Hi @joehollerup I haven’t seen this before actually. You shouldn’t need anything higher than 72 dpi for the web though. Could you link me to the page and I’ll have a look for you 🙂

Rob
Userlevel 6

Hi @phinchcliffe the uncompressed or minified version won’t impact the functionality of the code either way. I’d recommend using the minified version though as it will load faster.

I had a look at the page and it looks like you’ve added the entire jQuery library to the page. You don’t actually need to download the jQuery library and add it directly to the page. All you need to do is add the CDN link to the head of the page. If you replace the code you have in the “Carosel” script with the following and save it should work ok in preview:
`

<script src=“http://code.jquery.com/jquery-3.3.1.min.js” integrity=“sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=” crossorigin=“anonymous”></script>

I wasn’t able to see any content on the live page though unfortunately. I think that may be a separate issue related to the Unbounce Wordpress plugin (most likely the page is being served from a Wordpress cache). If you aren’t seeing the updates made in the page builder reflected on the live page after republishing you can reach out to our support team (support@unbounce.com) and we can help you there with that issue.
`

Rob
Userlevel 6

Hi @tapmyads I haven’t created a mobile version of this script I’m afraid. You should be able to get it working on mobile by adding the “tap” and “touchstart” events to the code though. I can’t promise this will work but it’s worth a try.

In the last two functions in the code (that trigger the carousel), change the click event to be:

$(right).on(‘click tap touchstart’, function() {

It would look like this in the actual code: https://www.screencast.com/t/9K1nc8xFl

Those are the equivalent “click” events for mobile, so that should get the same functionality on mobile devices. Let me know if that does the trick.

P

@Rob

Perfect! Everything works as intended now. Thanks so much for your help!

I’m not very experienced with web development and code, so I didn’t understand what a CDN was versus the entire jQuery code. For future reference it might be a good idea to clarify that a bit, because for users like myself, it’s super easy to copy the entire library instead of just the CDN link and still think that you’re following the directions correctly.

Appreciate your speedy response!

JJJ
Badge +1

Question
📈 :spinbounce:

How was this spinning spinbounce unbounce logo/emoji made?

I really want to duplicate this for our logo

Kenji_Sano

I love this it worked perfectly thank you so much!

H

@JeffAtStrawhouse Apologies for replying to a very old comment, but I also wanted to do this on a page I’m working on. Did you figure out a solution to this?

@Rob is there a way to do this with the script, or would it be a case of custom job using your previously recommended https://flickity.metafizzy.co/ ?
Thanks in advance!

S

Thank for the slider’s code, i want to auto cycle and negotiations also i need both to work with

W

Are you still able to help me set this up?

D

@Rob , some questions/concerns:

  1. “Below you’ll find some code”… no, there is no code shown in the article, I’ve had to dig through the replies to find a link to github code.

  2. The code isn’t working for me. I can’t make my page live without the code working so I don’t know how to show it. I see something in the replies about using a CDN link, but that script showed as an error in my unbounce editor.

Please advise.

Stef36

Hi Moclin,

It looks like you managed to make it work in the end and the two carousels in your page are working simultaneously now. Could you share how you fixed this issue?

Thanks!

Reply


Terms & ConditionsCookie settings