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


Userlevel 6
  • Former Unbouncer
  • 198 replies

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:

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

Userlevel 7
Badge +1

Awesome post @Rob! Can’t wait to see how people implement this! :gif_master:

Maaaan… I ❤️ you, @Rob.

You should have just vanished after you wrote this:

Awesome, @Rob - can’t wait to see what comes up with this.

I am not going to do it though, unless I just want to show off. Don’t want to hurt any chances of the meager conversions that do come in 🙂

Can’t wait to try out this awesome script, thanks a lot! It’s a pain point many of our clients have - wanting more options for image slideshows, etc. So thank you!

@Rob

Hi Rob, great stuff. It works great however in my case there’s an awkwardly long pause before the cycle restarts and in your example it switches back instantly. Is there a certain value I have to put in the code to fix that?

Would you mind taking a look here - http://trial.teensafe.com/heels-sliders/
I moved the fade section to the top so you don’t have problems finding it.

Also, I noticed that step 3 is missing “” piece, for someone who has coding experience that would obvious but it took me a second to figure out that portion too haha

Userlevel 6

I just sent you a DM with the fix for your page 🙂

There was a hidden image causing the delay.

Userlevel 6
Badge +1

Ok, this is seriously SEXY 😍

https://s-media-cache-ak0.pinimg.com/564x/bc/47/da/bc47da0346a094fbafce3e92783dcfb1.jpg

Badge

Rob- this is great and comes at a perfect time for us. Thank you.

Any idea what we are doing wrong here? http://try.btelearning.com/one-test/

The carousel works wonderfully, but adding the javascript to the page strips the font properties for the entire page. This happened on both pages I have tested.

Also, does the carousel work on mobile devices.

Thanks again!

Userlevel 6

hi @icecoldmn Thanks for bringing this to my attention! It looks like the community post here had stripped out the closing script tag for the jQuery cdn link. I’ve updated the post with a link to the actual CDN page so the issue won’t happen again.

I see you sent in a Support ticket, my colleague Mirage fixed the page for you and it should be working now.

In re: to mobile the script will work in the same way with the mobile version of the page 🙂

Badge

Thanks Rob. It is working great now! Thanks for the quick response!

Hi Rob,

could you please help me with the integration of jQuery? Whenever I paste it into Scripts Unbounce warns me of an error in the script and the Carousel implementation does not work (tried uncompressed and minified). Thanks

Userlevel 6

Hi @ilnp Happy to take a look for you. Could you share the page URL with me and I’ll see what’s going on.

Hi Rob, I managed to complete the page without the slider since I could not wait for an answer, but thanks for replying. Initially, I wanted to make portfolio pictures, not in the headline but in the Testimonials section to test whether its a conversion killer. However, I would appreciate if you could glance the page and give a few quick comments http://get.breezyhillmarketing.com/wordpress-website-services/

Thanks!

Userlevel 6

Hi @ilnp Apologies for my late reply here. I had a look and I think the page looks great! (I should add the caveat here that I’m not a designer)

I do think that the testimonials are a great use case for this script though. If it’s ok with you I’d love to take a crack at helping you set it up and get it working on the page. I’ll shoot you a direct message once I’ve got something for you.

@Rob,

thanks for this topic. I am working on this carrousel but still have some questions.

I want to slide 10 images of the same size. Only difference of these images is the text in the middle. I’ve uploaded the box widget page. But still have some questions:

Where do I place them:
· Do they all need a different box?
· I don’t to be the section as big as the 10 images standing side by side. I want it to be as big as one image and some space around. You know what I mean? How to manage that?
· I’ve added the script to click through the images, but I think the auto swap script has an instruction to wait 2 seconds. Where do I delete that? (sorry, not yet a javascript pro)

Regards, Esmee

Userlevel 6

Hi @Esmeevant apologies for the delayed response here! I had a look at the page you sent to Les in support and it looks awesome! I was ready to hop in here with an answer for you and I checked the page and you had already gotten it setup, nice one!

For anyone else reading who is interested in the answers to these questions:
- Do they all need a different box?
Nope! Each element just needs to be nested inside the main box the script is targeting. If you’d like to group elements to have them all appear on click together (image and a link perhaps) you can do so by nesting them in a box…and then nesting that box in the main box…#boxception

- I don’t want the section as big as the 10 images standing side by side. I want it to be as big as one image and some space around. You know what I mean? How to manage that?
I do know what you mean yep! You can layer the elements (images in this case) on top of each other in the main box. The script will hide them all but one at a time and automatically centre them. So you don’t need to worry about where they are positioned in the box either, just as long as they are nested inside of it. With chaos comes order.

· I’ve added the script to click through the images, but I think the auto swap script has an instruction to wait 2 seconds. Where do I delete that? (sorry, not yet a javascript pro)
No need to be a javascript pro and there is only one way to learn anyway, and that’s to get your hands dirty. The auto cycle script does have a 2 second delay by default. That can be edited using the 'var time = ’ line in the script. Don’t delete it though or things could break. If you need to cycle the elements on click just grab the second version of the script built specifically for that purpose below the auto cycle one in this post 🙂

@Rob, Hi thanks for your reply. And now I have another question. How do I remove the delay/fadein/fadeout? I tried it by changing the fade in/out and delay time from 500 to 0. But that doesn’t help. Hope you have the answer.

Userlevel 6

You can try setting the time variable to ‘0’. The fadeIn and fadeOut functions have a default delay built in, so you’ll want to change those to ‘.show()’ and ‘.hide()’ respectively.

Here’s a screenshot: https://screencast.com/t/FDYY8wzZn

I haven’t tested this, let me know if it works for you!

That helped!
Thanks!

Met vriendelijke groet,

Esmee

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!

Userlevel 6

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 🙂

@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. 🙂

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!

Userlevel 6

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.

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

Reply