Skip to main content

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

Hi Rob,

Of course, thank you so much! Here’s the link. We just started designing it so don’t mind the rest haha.


It’s in the second section, I put your name in red ; ) I got something weird to happen, like two texts on top of each other and both disappear at different times even though they’re both set to 5000ms. I don’t know why.


http://unbouncepages.com/dermafix-austin/


Thanks in advance!

@teamvoilasocial Thanks for the link! I had a look and I’ve got it working on the page for you. I created a new variant so as not to make an changes to the original. The script is working now on variant B (its unpublished so you can check it out in preview mode).


I removed a couple of extra instances of the code on the page and moved the jQuery CDN to be in the same “script” as the carousel code. For some reason jQuery was not loading before the carousel code. To be honest I’m not sure why that was happening. Moving the location of the CDN script though did look to solve the issue. Have a look at variant B and it should give you what you need to get it working on the actual page 🙂

Rob, thank you so so much!! For your assistance and for your quick reply. I’ll start editing that B version now 🙂 will let you know if anything!

Thanks again, have a great week!

This is good info. Thanks

Hey @Rob I’m having some issues getting those left and right buttons to work for me right now. It appears that every time one gets clicked it disappears and the other one reappears (so if I click the left button, the right one shows up!)


Would you have any suggestions?


carousel is at the bottom of the following page which is in progress:

http://unbouncepages.com/cb45fd25-18de-4dde-a246-878c1e9bb17e/


Thanks!

Hi Cassandra, I tried taking a look at your link, but it didn’t show up. Did you by chance change the URL?


I’ll keep an eye out 🙂


-Jess

Hey Jess,


I realized it was unpublished! It should be good to go now! Thanks!

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

That did it! Thank you so much for the speedy response!

Hey @Rob The on-click function is good, but I need both, auto swap + on click. Any help pls?

Hey @Rob, Thank you for any quick help.

Hey @Rob I’m having some issues on my page too. Would you give it a quick look?


a) Every time I click the left or right button the images get overlapped


b) Can I put instead of a botton with left/right an image?


Would you have any suggestions?


phttp://abuelocomodo.com/slider-13/]

Hi @Roberto_Bolanos,


You are also calling the script twice. Once to auto-rotate and once with the left/right navigation buttons.


Leave only one of the two.


Best,

Hristian

Hi @Wrik_Sengupta unfortunately I haven’t created a version of this script that combines both the auto and click functionality. Sorry about that! I’m sure it’s possible to combine the two, but would require some Javascript knowledge. If you’re looking for something with more options in terms of controls you might have better luck embedding a third party carousel using the html widget.

thank you really much! works very nice 🙂

Hey @Rob, I can’t seem to get the carousel working on my page, and not sure where I’m going wrong. Would you mind taking a look? (Bottom of the page, under “WHAT CUSTOMERS

ARE SAYING”)


http://unbouncepages.com/student-testing/


Any help much appreciated! Thank you.


Cheers,


Alister

@Hristian thanks for the help, this is my last question on this topic


On this landing page the carousel dissapears when I installed the fading sticky bar script. How can i make both work together?

disappared


http://abuelocomodo.com/grua/


Thanks in advance 🙂

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

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

Thank you very much, I dont´want to offend you in any way, but can I hire you to fix this as a freelancer?


if not please let me know what I might do 🙂

Hello,


I was wondering, if I have multiple auto carousels, do I need a separate javascript for each one? Or is it possible to have multiple items in one javascript?


Thanks!

Thanks so much @Hristian!

HI! Is there a way to make the code not work for mobile but leave on for Desktop?

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



Hi @Rob,

I am also having the same issue as nbanda, but with images. I’ve nested them in the order I want them to appear on our page and still no luck. I also created a new box and nested them in my ideal order and still no luck. I am working on www.peerhealthexchange.org/letstalk. Any advice?

Reply


Terms & ConditionsCookie settings