[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

Jess
Rank
Userlevel 7
Badge +1

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

Ashwin_Satyanarayana

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 🙂

Jess
Rank
Userlevel 7
Badge +1

For anyone who is trying to implement this for the first time, I highly recommend following along with Jon’s video tutorial here:

Elvin

Never mind, it’s working now! Thanks anyway 🙂

Rob
Userlevel 6

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

There was a hidden image causing the delay.

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.

J

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

Hristian
Userlevel 7
Badge +3

Hey @Cassandra_Cassell,

The page seems to have a few variations and only 1 of them has the carousel but that’s not the issue 🙂

  1. You have 2 instances of the script. You only need one. Keep the one in the screenshot below but fix the container ID that’s highlighted. Get rid of the other script above it.

2020-03-23 at 15.47

  1. Both of them are placed in the <HEAD> section instead of the <BEFORE BODY END>.

Fix these 2 things and you should be good to go.

Best,
Hristian

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

thank you really much! works very nice 🙂

Hristian
Userlevel 7
Badge +3

Hi @Roberto_Bolanos,

Both scripts are making use of certain effects (fadeIn, fadeOut, etc.) which is causing the break.

I don’t have a fix since I haven’t looked into it much but should be possible to fix given some time to adjust the scripts.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Hristian
Userlevel 7
Badge +3

Hi @Alister,

I would start by cleaning out the multiple jQuery libraries and only loading the required one for that script - 2.2.4

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Rob
Userlevel 6

Hi @PeerHealthExchange sorry for the late reply here. Just had a look at your page and it looks like you’ve got this working now though (under the Let’s Talk: Real Stories section)? Let me know if you’re still having any issues though, happy to take another look for you as soon as I can.

Rob
Userlevel 6

Hi @aprilm thanks for the kind words! If you’re referring to the nice video tutorial, that was actually put together by my colleague Jon who works on our Customer Support team. I’d have to agree he is very clever 🙂

To answer your question, unfortunately the two versions of the code don’t work together “out of the box” as they say. I have no doubt that it’s possible to combine the functionality, I just haven’t done that in either version of the code so it would require some tweaks. I can’t say when, if ever, I’d be able to make an improvement like that though I’m afraid.

V

Hi @Rob! Thanks for the help, I’m trying to add some slick dots to this carousel, it is that possible and do you know how?

UnbounceTechTeam
Rank

Hey @Delphine_Kreis!
This is Vicky from the Unbounce Team here - so sorry for this late reply! We will do a better job in the future! 😭
As Jess mentioned in the previous reply, if you need help with anything, please feel free to tag @UnbounceTechTeam and we will be more than happy to take a look!

— Vicky

UnbounceTechTeam
Rank

Hey @Elvin!

Sorry for this late reply! I’m glad you were able to figure this out in the end!
Rest assured if you need help with anything, please feel free to tag @UnbounceTechTeam and we will be more than happy to take a look! 😇

— Vicky

UnbounceTechTeam
Rank

Hey @Monitoreo_Hauscom!

Sorry for the late reply here! I was able to perform some testings on my page and you’re indeed correct! It seems like the scripts are interfering with each other which means it might not work without tweaking the original code. 😢

I’m wondering if you are still working on this page? If so, please feel free to tag @UnbounceTechTeam moving forward and we will be more than happy to take a look! 😇

– Vicky

M

@Jess Thank you for your reply. I have the carousel built in a “section” and I have a Main Box for the carousel. I then have each “Slide” within the Main Box. When published and previewed, it only shows the first “Slide” which fades away, then nothing else shows.
Screen Shot 2020-08-06 at 4.25.09 PM|404x230

I am using the Auto Play Script Code (Inserted in before body end tag):

/*
Unbounce Community :: Tips & Scripts :: Carousel With A Box Widget
TS:0002-04-063
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/

  // jQuery 2.2.4 requierd
  // CDN link here - https://code.jquery.com/
$(function() { 
  // Add a box to the page and nest the elements inside (can include boxes with grouped content)
  // The first element that is nested in the containing box will be what shows on page load
  // Add ID of box containing elements. 
  var container = $("#lp-pom-box-362");
  // Add the amount of time before the element switches. EX: 2000 = 2 seconds
  var time = 2000; 
  // code to select and centre elements 
  container.children().css({
                        'top': '50%',
                        'left': '50%',
                        'transform': 'translate(-50%, -50%)'
                           });
  var allEls = container.children().not(":eq(0)");
  var notFirst = allEls.not(":eq(0)");
  notFirst.css('display', 'none');
  // Function to cycle through the elements in the containing box and show/hide them  
  function ShowEls(el, delay) {
    $(el[0]).fadeIn(300)
	    .delay(delay)
	    .fadeOut(300)
	    .promise()
	    .done(function() {
	      var putBack = el.splice(0, 1);
	      if (el.length >= 1) {
	        ShowEls(el, delay);
	        allEls.push(putBack[0]);	             
	      }
	    });
    }
  ShowEls(allEls, time); 
});
</script>

As well as the JQuery (Insert in the Head) I’ve tried both this script and the newer version script:

<script>
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

Hope that is all helpful information!

M

Call it a long day, but how do I break it off into a new thread?

justinek

Hi @Hristian, we were able to figure it out. Thanks for trying out the link.

J

I’ve just tried removing that script and still nothing. I might try changing it completely to the click through version and hopefully that works.

Ana_Morra

Hello All!
I have used this on-click slider for my landing page and it works great on my desktop version.
However on my mobile version I’d like to be able to swipe left/right (with my fingers) instead of having to click on a button to go from one testimonial to the next. This slider doesn’t seem to have that option.

Do you have a solution or code to add here? Or maybe recommend another slider that can do what I need?

Can you help me? Thank you!

jaynecn

Thank you this is great. Usually when I try these things I can’t get them to work, but this was easy to follow.

J

Maaaan… I ❤️ you, @Rob.

Reply


Terms & ConditionsCookie settings