Hi @Rob,

Great tutorial, it’s very clever! I was wondering if there was a way to get best of both worlds and have both auto scroll with the on click buttons as a carousel?

Thank you so much.

Hi Rob - I’m a longtime user of this script and absolutely love it. Thank you for solving such a major pain. Unfortunately, I’ve run into an issue that I can’t seem to solve.

My carousel won’t seem to display the first slide first. It keeps showing my second slide:

http://try.outbackteambuilding.com/virtual-team-building-training-covid19/

Any help would be greatly appreciated.

Hi everyone. I’m trying to implement this carousel and the mobile hamburger navigation menu, both in the same page. The carousel works great but when I tried to add the menu and paste the reference to the jQuery library, the carousel stops working while the navigation menu works well.

It’s possible to have them both working in the same landing page?

This is the jQuery I used for the menu (step 4 of the Mobile Hamburger Navigation Menu tutorial):

Thanks!

Hello @Rob, I need your little help. It works on the desktop version but not on the mobile. Can you suggest please where I do mistake ? http://get.morningrunner.com/getting-started-click-through-125095/

Hi @Rob! Thanks for the help, I’m trying to add some slick dots to this carousel, it is that possible and do you know how?

Never mind, it’s working now! Thanks anyway 🙂

Hey @Delphine_Kreis!
This is Vicky from the Unbounce Team here - so sorry for this late reply! We will do a better job in the future! 😭
As Jess mentioned in the previous reply, if you need help with anything, please feel free to tag @UnbounceTechTeam and we will be more than happy to take a look!

— Vicky

Hey @Monitoreo_Hauscom!

Sorry for the late reply here! I was able to perform some testings on my page and you’re indeed correct! It seems like the scripts are interfering with each other which means it might not work without tweaking the original code. 😢

I’m wondering if you are still working on this page? If so, please feel free to tag @UnbounceTechTeam moving forward and we will be more than happy to take a look! 😇

– Vicky

I know this is from roughly 3 years, but hoping someone still checks comments here! I just uploaded the scripts to my unbounce page and created my 5 “slides” all housed in a main box in the section. When I preview, it begins to cycle through the slides, but only shows the first one, and it never cycles back. My test page can be found here: http://unbouncepages.com/beerwerks-test/

@Jess Thank you for your reply. I have the carousel built in a “section” and I have a Main Box for the carousel. I then have each “Slide” within the Main Box. When published and previewed, it only shows the first “Slide” which fades away, then nothing else shows.
Screen Shot 2020-08-06 at 4.25.09 PM|404x230

I am using the Auto Play Script Code (Inserted in before body end tag):

/*
Unbounce Community :: Tips & Scripts :: Carousel With A Box Widget
TS:0002-04-063
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/

  // jQuery 2.2.4 requierd
  // CDN link here - https://code.jquery.com/
$(function() { 
  // Add a box to the page and nest the elements inside (can include boxes with grouped content)
  // The first element that is nested in the containing box will be what shows on page load
  // Add ID of box containing elements. 
  var container = $("#lp-pom-box-362");
  // Add the amount of time before the element switches. EX: 2000 = 2 seconds
  var time = 2000; 
  // code to select and centre elements 
  container.children().css({
                        'top': '50%',
                        'left': '50%',
                        'transform': 'translate(-50%, -50%)'
                           });
  var allEls = container.children().not(":eq(0)");
  var notFirst = allEls.not(":eq(0)");
  notFirst.css('display', 'none');
  // Function to cycle through the elements in the containing box and show/hide them  
  function ShowEls(el, delay) {
    $(el[0]).fadeIn(300)
	    .delay(delay)
	    .fadeOut(300)
	    .promise()
	    .done(function() {
	      var putBack = el.splice(0, 1);
	      if (el.length >= 1) {
	        ShowEls(el, delay);
	        allEls.push(putBack[0]);	             
	      }
	    });
    }
  ShowEls(allEls, time); 
});
</script>

As well as the JQuery (Insert in the Head) I’ve tried both this script and the newer version script:

<script>
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

Hope that is all helpful information!

Call it a long day, but how do I break it off into a new thread?

Hi @UnbounceTechTeam I’ve put in the code and everything looks right (I’ve double checked everything I think!!) but it’s still only showing one testimonial. http://www.ezarc.co/