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 Unbounce Team,


I tried setting up a clickable carousel according to the video above, but it doesn’t seem to be working. here is the link to the published page: https://get.justsift.com/test/. The buttons click, however, it doesn’t advance to the new slides.

Hi @justinek,


It works for me if you have in mind the testimonial slider.


Best,

Hristian

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

Hi everyone,


I’m trying to install a slider and I managed to get it working but it only shows slide2 and then fades to nothing. I’ve tired installing various versions of JQuery and removing what was there before, hiding and unhiding, duplicating slides but still nothing. Anyone know what might be the issue here?


I’ve been using the auto-cycle if that helps at all.


Thanks!

Hi @Jodi, I’m testing a theory because I’ve seen this once or twice before. Are you running any other scripts on your page? Sometimes they don’t play well together.


-Jess

Hi @Jess so I have the Google library installed but I’ve tried removing that too and nothing happened so I figured I’d put it back. The only other script running aside from this is the smooth-scroll script.


I’m not sure if this helps but there’s the site: https://ignite.worldvision.org/wvus-ignite-fall20-tx/#lp-pom-form-119

@Jodi smooth scroll might be the culprit. Check in the script used for your smooth scroll, it might have a jquery script that’s conflicting with the carousel script.


If you’d like, you can send me the link to your page overview and I can double check if that’s what’s causing this.

It came up in another instance here, which has some more explanation:


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.

I have added the script. Works great on desktop, but on mobile the copy is not resizing properly. https://tour.ndacademy.org/

Hi there! :slight_smile

This script is aweseome! I just have one question:

For the first slider everythink works fine. But the second picture carousel just wont work. I added the script a second time and of course changed the box and buttons id’s. Anyone had the same problems with a second carousel?

Hi @Rob ! this was super useful!

I applied everything as you explained in the video, but the text inside the boxes don’t show up in the live version. can you help with this?

Hey all! I’m having issues with some of my images (pngs) looking grainier in the click through carousel than on the page not in the carousel. The odd thing is that not all of the images are being affected, but when I pull the grainy images out of the carousel they look better? Any idea why this might be happening?

@Jess please let me know if you have any insight here!

Tried this to no avail 😦 Thought I followed the instructions to a T.

This is pretty lovely 🥰

@UnbounceTechTeam Is there a way to make all the images scroll continuously? Not just one after the other

thank you so much!

Having an issue with the carousel on click. Buttons are there, the labels correct but nothing seems to be happening. Anyone who can help?

@Rob Can you give us a script which has buttons for each testimonial, like if there are 10 testimonials so we have 10 small dots below the carousel and if user clicks on any one of them then that testimonial comes up. Example clicking on 6th dot among 10 dots testimonial #6 is shown right away.

@Rob is there any way to use both the auto and click functions so that if it auto switches to fast a visitor could use buttons to go back to the last box they were looking at?

Hi folks, looking for help. My carousel auto-cycle was working past few days. However it stopped cycling today. Can anyone guide me as to what I need to fix? Much appreciated!


Web page: www.jake.sg

Carousel Box ID: lp-pom-box-378

Hey! Is there a way to add multiple carousels to a page? particularly auto cycle.

I am seeing this when I implement the carroussel script at the bottom of my landing page… any idea what could cause this? I have implemented the auto script and the on click script on the same page.


image

Hi @Rob, I tried implementing this on click carousel using a series of videos in each box, but it doesn’t seem to work. Do you have any suggestions for creating a video carousel?

Reply


Terms & ConditionsCookie settings