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

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!

Hi Rob, I do everything step by step as per your instructions, and it does not work. Can you help?

Is it possible for this script to work for the full width of browser window? I would like my banner hero images to be browser width. Thank you.

Hey all,


I’ve set up 3 on-click carousels on my page and confirmed with HubSpot that were set up correctly. However, when I look at the live page, the carousel’s appear in completely randomized orders.


By default, it should display the carousel slides in the order in which they are nested. But, they aren’t even sequential in my case.


Anyone have an idea why this might be happening? I’m thinking it may have to do with the fact that I’ve got multiple carousels on the page?


Cheers.

Hi! can I do it in multiple sections of a page?

Thanks … @UnbounceTechTeam - do you have any solutions that might be able to help me fix the issue i’m having with my carousel slider slides displaying in completely randomized orders?


Cheers.

I made a testimonial slider that works within the Unbounce web editor because my clients found it difficult to edit the testimonials in the code editor block.


I would like to share this with the community, and because I would like to give support and keep improving it, I’m offering it here.

I’m building a carousel in order to create an animation effect. But for some reason the carousel is working backwards. Can’t for the life of me understand why. I’ve tried moving slides foward and back and the issue continues! Can someone help?


Thank you!!

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

I have updated the carousel. The height of the container is adjusted to the tallest slide. But the best thing is that you can make the cards with the Unbounce editor.

HI! I’m having the same issue. Could you elaborate more on your solution?

Thanks

(I know it has been 4 years but still 🙂 )

I had the same issue. I’ve replace the jQuery link in the javascript code. One of then was an older version, so I picked the most recent and replaced so they became equal.

Hey there,

I have my slides nested and within a container, added both scripts and updated ID for the container, and it still isn’t working. Any ideas?

Hey there Raleigh,


Thanks for posting in the Community. Without seeing the page and the carousel setup, it would be difficult to provide an accurate solution. However, it could be that there are multiple jQuery scripts which are conflicting, or possibly some other custom code that is interfering with the carousel JavaScript. Another possibility is that you are using jQuery v. 1.4.2 instead of the most up to date version


Hope this helps to solve the issue.

I just followed the tutorial video today (03/11/22) and it works just fine. Thank you! 😀

Hi, Rob. 

How can I show dot or indicator to the code @Rob ?

Hi everyone! Do you think there is a way to put a random order in the auto cycle?

I have a lot of slides so it would be great if they could show up in a random order 😊

Thanks!

Shouldn’t this be a native feature? When can we expect such a basic Landing Page feature to be added?

Hi! I recently just used this video to work on my landing page, but for some reason after inputting the code, the text disappears after the first slide. Thoughts please?

https://wentworthseniorliving.org/senior-living-111/

Reply


Terms & ConditionsCookie settings