Awesome post @Rob! Can’t wait to see how people implement this! 
You should have just vanished after you wrote this:
Awesome, @Rob - can’t wait to see what comes up with this.
I am not going to do it though, unless I just want to show off. Don’t want to hurt any chances of the meager conversions that do come in 🙂
Can’t wait to try out this awesome script, thanks a lot! It’s a pain point many of our clients have - wanting more options for image slideshows, etc. So thank you!
@Rob
Hi Rob, great stuff. It works great however in my case there’s an awkwardly long pause before the cycle restarts and in your example it switches back instantly. Is there a certain value I have to put in the code to fix that?
Would you mind taking a look here - http://trial.teensafe.com/heels-sliders/
I moved the fade section to the top so you don’t have problems finding it.
Also, I noticed that step 3 is missing “” piece, for someone who has coding experience that would obvious but it took me a second to figure out that portion too haha
I just sent you a DM with the fix for your page 🙂
There was a hidden image causing the delay.
Rob- this is great and comes at a perfect time for us. Thank you.
Any idea what we are doing wrong here? http://try.btelearning.com/one-test/
The carousel works wonderfully, but adding the javascript to the page strips the font properties for the entire page. This happened on both pages I have tested.
Also, does the carousel work on mobile devices.
Thanks again!
hi @icecoldmn Thanks for bringing this to my attention! It looks like the community post here had stripped out the closing script tag for the jQuery cdn link. I’ve updated the post with a link to the actual CDN page so the issue won’t happen again.
I see you sent in a Support ticket, my colleague Mirage fixed the page for you and it should be working now.
In re: to mobile the script will work in the same way with the mobile version of the page 🙂
Thanks Rob. It is working great now! Thanks for the quick response!
Hi Rob,
could you please help me with the integration of jQuery? Whenever I paste it into Scripts Unbounce warns me of an error in the script and the Carousel implementation does not work (tried uncompressed and minified). Thanks
Hi @ilnp Happy to take a look for you. Could you share the page URL with me and I’ll see what’s going on.
Hi Rob, I managed to complete the page without the slider since I could not wait for an answer, but thanks for replying. Initially, I wanted to make portfolio pictures, not in the headline but in the Testimonials section to test whether its a conversion killer. However, I would appreciate if you could glance the page and give a few quick comments http://get.breezyhillmarketing.com/wordpress-website-services/
Thanks!
Hi @ilnp Apologies for my late reply here. I had a look and I think the page looks great! (I should add the caveat here that I’m not a designer)
I do think that the testimonials are a great use case for this script though. If it’s ok with you I’d love to take a crack at helping you set it up and get it working on the page. I’ll shoot you a direct message once I’ve got something for you.
@Rob,
thanks for this topic. I am working on this carrousel but still have some questions.
I want to slide 10 images of the same size. Only difference of these images is the text in the middle. I’ve uploaded the box widget page. But still have some questions:
Where do I place them:
· Do they all need a different box?
· I don’t to be the section as big as the 10 images standing side by side. I want it to be as big as one image and some space around. You know what I mean? How to manage that?
· I’ve added the script to click through the images, but I think the auto swap script has an instruction to wait 2 seconds. Where do I delete that? (sorry, not yet a javascript pro)
Regards, Esmee
Hi @Esmeevant apologies for the delayed response here! I had a look at the page you sent to Les in support and it looks awesome! I was ready to hop in here with an answer for you and I checked the page and you had already gotten it setup, nice one!
For anyone else reading who is interested in the answers to these questions:
- Do they all need a different box?
Nope! Each element just needs to be nested inside the main box the script is targeting. If you’d like to group elements to have them all appear on click together (image and a link perhaps) you can do so by nesting them in a box…and then nesting that box in the main box…#boxception
- I don’t want the section as big as the 10 images standing side by side. I want it to be as big as one image and some space around. You know what I mean? How to manage that?
I do know what you mean yep! You can layer the elements (images in this case) on top of each other in the main box. The script will hide them all but one at a time and automatically centre them. So you don’t need to worry about where they are positioned in the box either, just as long as they are nested inside of it. With chaos comes order.
· I’ve added the script to click through the images, but I think the auto swap script has an instruction to wait 2 seconds. Where do I delete that? (sorry, not yet a javascript pro)
No need to be a javascript pro and there is only one way to learn anyway, and that’s to get your hands dirty. The auto cycle script does have a 2 second delay by default. That can be edited using the 'var time = ’ line in the script. Don’t delete it though or things could break. If you need to cycle the elements on click just grab the second version of the script built specifically for that purpose below the auto cycle one in this post 🙂
@Rob, Hi thanks for your reply. And now I have another question. How do I remove the delay/fadein/fadeout? I tried it by changing the fade in/out and delay time from 500 to 0. But that doesn’t help. Hope you have the answer.
You can try setting the time variable to ‘0’. The fadeIn and fadeOut functions have a default delay built in, so you’ll want to change those to ‘.show()’ and ‘.hide()’ respectively.
Here’s a screenshot: https://screencast.com/t/FDYY8wzZn
I haven’t tested this, let me know if it works for you!
That helped!
Thanks!
Met vriendelijke groet,
Esmee
Hey @Rob
Is there a way to control which image/text shows up first? I have 7 text in total, but would need to highlight a couple of text that the user should see first before the others.
Please let me know. Thanks!
Hi @nbanda the order the images appear are determined in the order they are nested in the box widget. So just make sure that first image you want shown is the first one added, and so on and so forth 🙂
@Rob
That’s what I thought too, but whenever I preview it, it doesn’t really do that. It doesn’t even matter if I place it forward or backward, the order is always the same. Perhaps, I’ll just publish it and see if that will make a difference. The subdomain is still propagating, so i’ll wait.
Will update anyone who’s reading this. 🙂
Hey @Rob
I’ve already published the page, but the text do not really show up based on how it is nested. Here’s the link to the page: http://get.weinsteinwealth.com/
I tried to put a text within a box of its own and nest it (was difficult to do it for 7 times), but even then, it wasn’t showing up correctly. Do you possibly have any solution to this?
Will appreciate it a lot.
Thanks!
Hey @nbanda I had a look at the page and you’ll need to remove each text element from the box and re-add them in the order you want to appear. I’ll send you a direct message with some more details on how to do this for your specific page.
Hi Rob,
Thanks for this great tip! I’ve got a couple questions:
- I am only using this on mobile and I want to be able to have users swipe side to side to advance instead of auto scroll (bonus points for auto scroll with the ability to swipe back and forth). How can I achieve this?
- Adding this broke my Accordion FAQ section on mobile and desktop. How can I fix this? Getting the following error in console:
Uncaught TypeError: $(...).accordion is not a function at HTMLDocument.<anonymous> (unbouncepages.com/:11205) at fire (jquery-1.12.4.js:3232) at Object.fireWith has resolveWith] (jquery-1.12.4.js:3362) at Function.ready (jquery-1.12.4.js:3582) at HTMLDocument.completed (jquery-1.12.4.js:3617)
Here is the LP: http://unbouncepages.com/test-bus-new-may-19/
Thanks in advance for your help
to the next level?
