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

#108

It is an Unbounce landing page.

#109

We are an Unbounce enterprise customer and my Customer Success Manager referred me to this script for the testimonial section of the landing page.

#110

Hi @Joey-ITVibes,

Maybe you had another link in mind for the landing page because the one you’ve provided is certainly not an Unbounce landing page.

https://www.aquascapespools.com/channel/custom-pools/

Best,
Hristian

#111

It was a matter of an underscore vs. a hyphen. I updated the link in the original post. It should be https://www.aquascapespools.com/channel/custom_pools/ I apologize for the confusion.

#112

It seems the testimonials are working as expected now.

#113

Hi — does anyone know how to use the box widget with three buttons. E.g. click on button 1 and it shows image 1 in carousel, click button 2 and it shows image 2 etc… Thanks!

#114

Hi @Rob

I have two carousels on my page - 1 for desktop (click) and 1 for mobile (timed).

I’ve tried timed and click for mobile, but I could not get either to work.

Can you please help?

Link - http://unbouncepages.com/basketballhq-all-groups-experts-page/

I receive this error message for the script - https://goo.gl/yzSbFR

Also, where should the script be placed? - Head, Before Body End Tag, After Body Tag? I think updating the instructions to include the placement would be beneficial.

best,
Josh

1 Like
#115

Upon inspecting view-source:http://unbouncepages.com/auto-element-cycle/, I see that the jquery code needs to be placed in the Head while everything else should be placed after the body tag.

#116

Hi @josh360 yep that’s correct. The error in your screenshot points to the issue being that the code is executing in the browser before jQuery loads on the page. Loading jQuery in the head should fix this for you as it will ensure it’s loaded before the script fires on the page. Did loading jquery in the head fix it for you?

1 Like
#117

Yes, thanks for the quick reply.

If the instructions don’t already mention the placements, it may be wise to update them (timer and click) to account for those steps.

Best.

#118

Hello, I have been trying to solve the error for 2 days, in the mobile view, my buttons are shown at the top of the page and should be located in the section (blue bg) “ASSIST 365 brinda una cobertura a medida: para cada viajero, en cada viaje” under the container box, What will be the problem? I have reviewed the code 1,000 times without success… HELP PLEASE

https://promociones.landings.com.ar/working-holidays-plantillaoriginal/

#119

Hey @Rob Quick question: I wanted to know if you have ever seen images rendering blurry when using this slider code.

I have exported my “slides” aka images in 72, 150, and 300 dpi to test the quality and each time the live slider renders the images low quality or blurry. Any ideas here?

#121

Hi @Rob how do I remove the loop (ie. I only want the slideshow to run once?)

Thanks

#122

Hi @Rob,

  1. which is the correct code to use? The site listed has an uncompressed and a minified version

  2. With either code, I get the orange triangle warning. Preview just shows a bunch of code, and this is what the published page looks like: https://nyhrc.com/carousel-draft-1/

What am I doing wrong here?

#123

@Rob did you build touch version for mobile on this?

#124

Hi @joehollerup I haven’t seen this before actually. You shouldn’t need anything higher than 72 dpi for the web though. Could you link me to the page and I’ll have a look for you :slight_smile:

#125

Hi @phinchcliffe the uncompressed or minified version won’t impact the functionality of the code either way. I’d recommend using the minified version though as it will load faster.

I had a look at the page and it looks like you’ve added the entire jQuery library to the page. You don’t actually need to download the jQuery library and add it directly to the page. All you need to do is add the CDN link to the head of the page. If you replace the code you have in the “Carosel” script with the following and save it should work ok in preview:
`

<script src=“http://code.jquery.com/jquery-3.3.1.min.js” integrity=“sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=” crossorigin=“anonymous”></script>

I wasn’t able to see any content on the live page though unfortunately. I think that may be a separate issue related to the Unbounce Wordpress plugin (most likely the page is being served from a Wordpress cache). If you aren’t seeing the updates made in the page builder reflected on the live page after republishing you can reach out to our support team (support@unbounce.com) and we can help you there with that issue.
`

#126

Hi @tapmyads I haven’t created a mobile version of this script I’m afraid. You should be able to get it working on mobile by adding the “tap” and “touchstart” events to the code though. I can’t promise this will work but it’s worth a try.

In the last two functions in the code (that trigger the carousel), change the click event to be:

$(right).on(‘click tap touchstart’, function() {

It would look like this in the actual code: https://www.screencast.com/t/9K1nc8xFl

Those are the equivalent “click” events for mobile, so that should get the same functionality on mobile devices. Let me know if that does the trick.

#127

@Rob

Perfect! Everything works as intended now. Thanks so much for your help!

I’m not very experienced with web development and code, so I didn’t understand what a CDN was versus the entire jQuery code. For future reference it might be a good idea to clarify that a bit, because for users like myself, it’s super easy to copy the entire library instead of just the CDN link and still think that you’re following the directions correctly.

Appreciate your speedy response!

#129

Question
:chart_with_upwards_trend: :spinbounce:

How was this spinning spinbounce unbounce logo/emoji made?

I really want to duplicate this for our logo