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


#65

Hi @cribar1234 can you make sure that all the content is only nested one level deep in the box you are using. Keep an eye out for content nested inside other content in the box. Feel free to share the page URL as well and I can take a closer look for you.


#67

I am not a developer but I like the idea of adding this feature to our landing pages. I was able to get it to work but I am struggling with allowing the user to control the changing of the elements. Could you provide some additional information on how that works?


#68

@Rob is there a way to modify “on click” so that i have multiple buttons a user can click, and when they click for example button C, then carousel piece C cycles in? use case would be using this as an alternative to a long landing page where buttons jump down the page. instead buttons bring up the content inside the carousel.

also, is there a way to make it so that the carousel doesn’t move at all unless a button is clicked (disable autocycle)


#69

anyone could help me. My script doesn’t works
https://app.unbounce.com/2356462/pages/66070fa1-af61-4752-99c1-476874742417/preview?variant_id=150641111#mobile


#71

hi @sgro28 unfortunately I haven’t built that functionality into this script. It’s a fantastic idea for an improvement though! If I ever manage to get it built in I’ll update this thread.

The “on click” version of the script doesn’t have the auto cycle functionality, so using that version of the script should solve that issue for you. You can find that here https://gist.github.com/RobertCam/e50e0223ff348d1db3947b18789caa80

If you do need the ability to navigate directly to specific content you may want to consider a third party carousel. This would require custom html and css though. https://flickity.metafizzy.co/ is a good option if you want to go that route.


#72

Hi @Betolima I just had a look at your page and it I can see you’ve got the script working, nice job!

One bit of feedback I have though is that the buttons to cycle through on mobile are pretty small and hard to see. You could make them a bit bigger and move them underneath the content that needs to be cycles through for mobile to make it a bit easier for visitors. Just a thought though and some unsolicited advice, feel free to ignore me :slight_smile:


#73

@Rob Hi, I am using both versions of the script, trying to find the one that works best for my client. But, I think he wasn’t the onclick version to work, but I can’t get it go. I’ve tried everything, even updated my jquery to the newest version. Any help would be appreciated. If you send me a PM I will send you the address.


#74

Hello all. I might be a little late to the game - just saw this and it’s awesome!

I’m currently encountering a small hiccup, where on mobile, the text is too wide and causes it to appear to the sides of the screen. Is there any way to properly resize this?

I’ve tried changing the text size, box size, and even messing with the visibility on mobile versus desktop but maybe I’m not doing it right. Would truly appreciate your help, @Rob or anyone who might know a fix!

Thank you in advance :slight_smile:


#75

Hello Everyone!

Loving this post - but I am a total dunce.

Cannot get this script to work :frowning:

Can you someone hold the hand of a newbie and give a complete example of this script in action?

I need a plug and play version :slight_smile:


#76

@Rob need a little help. Trying to mimic the on-click functionality on a landing page. Created a large box, nested elements (all except my buttons), and added the necessary codes, but still nothing works in preview mode or when I publish. Here’s a link to my page: http://unbouncepages.com/banner_health_womens_institute/


#77

Just hoping a community member or the publisher of this doc might be able to help me figure out a way to instead of having previous / Next buttons style set up, instead have thumbnails below the slide show of each image and if you click one of the thumbnails it changes the slide show to the corresponding image.

Would love a solution to this idea if possible.
all the best guys and great work and collaboration here love it!
-Jeff


#78

This is terrific! Thank you!


#79

@Rob Hello, how are you? Sorry for my english, I’m using a translator!

I have a page https://eventos.americahall.com.br

We set up some slides, the page keeps rotating photos continuously. I made a new variant of this page the client would like form on top. After saving these changes, the slides no longer work.

In preview the slides work normally, but when I open the page in my browser, the slides do not run.

I followed all the steps, and everything was working normally, after I made a new variant to test the form, it stopped everything! Is there a conflict between the pages? I have variant A and variant C


#80

Hi @Maestro_do_Adwords I just checked the page and the code looks to be working ok for me. I can see the images swapping. This is what it’s looking like for me, let me know if you are seeing anything different or if this isn’t the intended outcome of the code: https://www.screencast.com/t/00uOBC5Xemd


#81

Hi @tierra so sorry for the late reply here. I just checked your page and I can see the code is targeting “#lp-pom-box-989” but I wasn’t able to find that box on the page. Could you let me know which part of the page you’re wanting to use the code on and I’ll take a peek for you.

It won’t be another month until I reply either, promise.


#82

hi @Rob_Ferguson I’m suuuuper late to this apologies. Absolutely send me a PM if you still need some help!


#83

Happy to take a look for you @calvinquantum if you’re still having some issues. Could you share the page and I’ll see what I can dig up for you.


#84

Hey there Rob!

Can you please link me to the script you use in order to make the carousel a click through.This will be two images, and I’d like for the customer to click to go back and forth between the two.

****never mind found it in the comments!


#85

@Rob that page’s content has changed and is almost live, that’s probably why you can no longer find it. For future landing pages, could you possibly outline in more depth the process of creating an On Click Carousel? For example:
where to place the left and right carousel arrows so they don’t get centered in the box widget
which jQuery v. 2.2.4 code should be used: uncompressed or minified?

Thanks for your time :slight_smile:


#86

Hi @tierra for sure I can help with those questions :slight_smile:

You’ll want to place the left and right buttons outside of the box widget that the contains the content to cycle through. If they are placed in that box they will be treated like the other content and hidden on page load, which makes it impossible to click them so the code never executes. If they are outside the box though you’re all good!

For jQuery I’d recommend calling in the minified version simply because it will load faster. Ultimately though they will both work so it’s up to you. In this context there is no advantage to using the uncompressed version though so probably better to use the minified version.

Hope this helps!