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


#44

Hi @Rob,
I’m having trouble with the on-click script. I’ve nested a left and right button in the box, but neither appears - and the slide show doesn’t go. Do I need to point the buttons somewhere? (Currently set, in Unbounce, to ‘go to a URL’ - left blank, buttons ids have been added to the code ie #lp-pom-button-148, #lp-pom-button-149
Dreamweaver suggests that this ‘var container = $("#lp-pom-box-134");’ is a syntax error in the code but, same line works in the autocycle (box-134 is my box).
Also, auto-cycle finishes on an blank box - cycles back to the first slide after a delay- is there a way around this? (Late edit: Fixed this by putting an image as the background for the box, so it looks like the last slide. Still no controls though)


#45

Hi again @Rob,
Managed to sort it out. Buttons needed to be ‘outside’ the box.


#46

@Rob Hi! I’m having an issue with this code since both buttons seem to go in the same direction, which is forward, no matter if I click left or right, is there a fix for this? I need a little help with it. Thanks in advance

(my link so you can check out: https://try.idea180.com/4647pinetreedr/ )


#47

Hi @Enrique_Pinedo,
We had the same issue. There is a slight error in the code. You just need to change:
function cycleTimeLeft() {
cycleRight(allEls, time);
(left).off('click'); setTimeout(function() { (left).on(‘click’, cycleTimeLeft);
}, time*3);

to

function cycleTimeLeft() {
cycleLeft(allEls, time);
(left).off('click'); setTimeout(function() { (left).on(‘click’, cycleTimeLeft);
}, time*3);

Cheers


#48

@Uniting Thanks! I’m going to change it now :slight_smile:


#49

Hi @Rob,
This code is awesome and I’ve used it on almost all of my pages. I’m currently having an issue with the script not executing properly on one of my pages. I’m using it multiple times on the page to open up an image gallery. If you have any idea what could be causing the script to not execute properly and a possible solution that would be awesome! The site I’m having issues with is https://www.abbyy-finereader.com/ in the “What’s New?” and “Why FineReader?” sections.


#50

Hi @Rob, or anyone else who may be able to help,

Thank you so much for sharing these steps! I’m having some trouble displaying all of the images nested in the main box. It is only showing one of three images that I have nested in the container. Also when I press the left/right buttons, the main container shows a blank box after fading out. Can you help me identify what I am missing here? You can see my working page here: http://alation.com/test-jl-page-20180108-slider/

Thank you so much, and I hope to hear from you soon…
Janice


#51

Nevermind I had 2 conflicting javascript codes - removed one and it corrected the error!


#52

Hey @Rob

Just implemented the code, which is great!

What do you need to do so you can get more than one image in the carousel showing at a time? And for the carousel to still cycle through?


#53

HI @Adtrak! Glad you found some use in this workaround :slight_smile:

You can get more than one image showing at a time by nesting them all in a box widget and then nesting that box into the box being turned into the carousel by the code (#boxception).


#54

Hi @Rob! I need some help. I was talking to Support on chat before and they redirected me to this article but I’m not very sure this is what I need.
I’m building up a pricing landing page (adding a price table with 3 options). We have clients worldwide and I wanted to know if I can enable somehow a currency switcher. An example: https://unbounce.com/pricing/ => here you guys have done it to compare monthly vs. annual; in my case I want to compare USD vs. GBP.

Can I do this?


#55

Hi @MRubio-ED I haven’t created anything like this I’m afraid and I’m not aware of any current workarounds that will achieve this specific functionality. Sorry about that!

Doing some cursory research it looks like there are some pre built solutions to this, although they would require some custom code and some knowledge of javascript. If you have anyone on your team that knows javascript this might help getting started: http://openexchangerates.github.io/money.js/

Sorry I don’t have a better answer for you on this.


#56

Hi @Rob

When I asked Unbounce for such feature they immediately sent me this link. Thank you for writing the codes for us to use! I installed the codes and JQuery 2.2.4 (head) as you instructed but somehow neither of the images nor the testimonials are rotating. I don’t know if there’s any conflict so I can’t see the effects. I also want to set the background of box for the testimonials transparent so it’s not a white box on top of the dark image. Could you please let me know what went wrong with my codes? The link is www.thedocteur.com

Thank you.


#57

Hi @ellie you caught me at a good time!!

I just had a look and there was an issue with the jQuery 2.2.4 script tag in the head. To be honest I’m not entirely sure what the issue was but I saw the warning in the page builder and repasted it in and that seemed to fix the issue.

Sometimes quotation marks end up getting swapped for “curly” quotes when pasting text between different web properties which could explain the issue. Either way though the script looks to be working now! You can check it out in Preview mode and if you’re happy go ahead and republish :slight_smile:

All the best


#58

Hi @Rob Interesting! the image does rotate now!
However, somehow the box for the testimonials is still white instead of transparent even after I remove the quotation marks. Do you have any solution for this?

Best,


#59

@Rob,

Was wondering if you knew how I could control the order of the images fading in and out. Right now in the box I turned into a carousel I have Box1, Box2, Box3, and Box4 arranged in that order. However when I publish my page it loads as Box1, Box3, Box4, Box2. Do you know what determines the order of the carousel?

Thanks


#60

Hi @ogkchen The script will display the boxes in the chronological order they added to the box widget the script targets. Not intuitive I know, it’s simply how the page builder compiles the html for a page. If you need to change the order you will need to ‘unnest’ the boxes and re-add them. The easiest way to do that is probably to copy them and then delete them one at a time and re nest them in the order you need them to display.

Pretty tedious I know, sorry about that. It’s the only way to control what order things are nested in the builder though unfortunately.

Let me know if you hit any snags.


#62

@Rob Thank you for the code. But I do have a question. I have multiple things inside the box that i am using. The first image shows up fine, but when i click a button to go to the next image, the first image fades away and all I am left with is just a white box. Any idea why the second image insnt appearing?

Thanks,
Collin


#63

@Rob I got it to work! Thank you. My next question is, is there a way to add a pause button on the carousel? Or is there a way to combine both auto cycling and on click settings?


#64

hey @ogkchen unfortunately I haven’t built this into the workaround. Sorry about that. Not sure if I’ll have the time to work it in, but if I do I’ll let you know.