Hey

I found I could only get two working on same page. If I added another elsewhere on then page, one of them broke.

Will check the scripts I used later and send.

Thanks

Ah, got it! Thank you so much, it is working now! 🙂

HI Guys:

i know its a very old post. But i am trying to work on the carousel but finding it difficult to make it work the way i want. Although i have successfully managed to work on the carousel thing when you click on right or left that image moves and another one appears. But i really want is something like this https://imgur.com/a/8QKGrJY where you have 3-4 product pics that is shown together and then when you scroll left or right to take it to other options.

Can someone help me on this please?

i don’t get this line, Inside of the box will turn unchecked

Hi all,
Does anyone know how to have the auto-cycle option WITH the right and left buttons included?
I’ve been trying by combining the two scripts together, but it doesn’t seem to work properly. This is how my script looks like now:

    <script>
/*
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 v 2.2.4 requierd
  // CDN link here - https://code.jquery.com/
  // 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	
$(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-2527"); 
  
  // Add ID of right button
  var right = $("#lp-pom-button-2547");
  
  // Add ID of right button
  var left = $("#lp-pom-button-2546");
  
  var time = 5000; 
  
  // 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');
     
  // Functions 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); 
  
  function cycleRight(el, delay) {
    $(el[0]).fadeIn(500)
	    .delay(delay)
	    .fadeOut(500)
	    .promise()
	    .done(function() {
          $(el[1]).fadeIn(500);
	      var putBack = el.splice(0, 1);
	      allEls.push(putBack[0]);	             
	    });
    }
  
  function cycleLeft(el, delay) {
    $(el[0]).fadeIn(500)
	    .delay(delay)
	    .fadeOut(500)
	    .promise()
	    .done(function() {
          $(el.last()).fadeIn(500);
          var putBack = el.splice(-1, 1);
	      allEls.splice(0, 0, putBack[0]);
	    });
    }
  
  function cycleTimeRight() {
    cycleRight(allEls, time);
    $(right).off('click');
    setTimeout(function() {
      $(right).on('click', cycleTimeRight);
    }, time); 
  }
  
  function cycleTimeLeft() {
    cycleLeft(allEls, time);
    $(left).off('click');
    setTimeout(function() {
      $(left).on('click', cycleTimeLeft);
    }, time); 
  }
  
  $(right).click(function() {
    cycleTimeRight(); 
  });
  
  $(left).click(function() {
    cycleTimeLeft();
  });
});
</script>

Any hint about how to make it work maybe?

Thanks!

Hi Valentin,

Unfortunately I couldn’t fix the code, so I left the right/left buttons without auto-cycle.

Still interested in a solution though, if someone has found one.

Thanks!

if you do find a solution please come back with updates, i’m really interested if you’re getting a solution.

Also can’t get it to work… Here’s my setup:

url: www.roekoo.nl/o.html
carousel box: lp-pom-box-306 (tried both with and without ‘#’ in front of it in the code)

And the scripts:

Script Name: jQuery
Placement: Head

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

Script Name: Autocycle elements
Placement: after body end tag

<script>
/*
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-306");

  // 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>

Could you help me out @Rob or someone else? really ove to have this feature on our website(s).

Thanks in advance!
Elvin

Could you post a link to the page where the code is implemented? It’s helpful for seeing any errors that might be popping up related to possible syntax. Is the code just not working at all or is there something off with the expected results? One thing you can check is to make sure the content is correctly nested in the box you are targeting with the code. This part can be tedious so I recommend opening up the “content” tab in the bottom left of the builder to make sure everything is nested correctly.

@Becky has started a new thread for trouble shooting this for you @aunetra here:

Hello @Rob, I’m having the same issue as above. We’ve had this code implemented on a few of our pages for over a year and it has always worked. Now it’s showing only the first image and no other images once that fades out. Do you have any ideas what could be causing the issue or a possible solution for it?

Sorry to hear you’re having some issues with the code @JamesN, could you drop a link to one of the pages with the issue here?

Nothing has changed within the script of it’s dependencies that would stop it from working “out of the box”. To confirm that I duplicated the original example page and republished it. The script still works as expected. One thing you could look into would be if any other code has been added to the pages that may be conflicting in some way with this script. So it might be worth checking if anything has been added to the page either via script manager. Code added via Google Tag Manager could also be causing a conflict. I should be able to provide some more help by checking the live page though

You caught me at a good time today @JamesN, I had a few minutes to take a look at the pages you linked. It looks like the issue is related to a conflict with different versions of jQuery being called in on the pages.

I’m seeing a console error on the live page

(index):8408 Uncaught TypeError: $(…).fadeIn(…).delay(…).fadeOut(…).promise is not a function

Which is being caused by the .promise() function in the carousel script. Looking a bit closer it appears there are three different versions of jquery being referenced on the page (1.12.4, 1.4.2, and 2.2.4). The last one to load on the page is 1.4.2 though, which appears to be taking precedence. That .promise() function isn’t supported until version 1.6.

Sooo long story short, it looks like jQuery 1.4.2 is what the browser is defaulting to since it’s loading last, and that’s causing an error with the carousel script. Removing that isn’t going to be too difficult though thankfully. You can remove the older versions of jQuery (1.4.2 and 1.12.4) since anything you need in those versions should be covered in 2.2.4

To remove the unneeded versions for jQuery:

• 1.4.2 is located in “Geo IP Lookup” script being applied via script manager. It’s the very top line of the code.

• 1.12.4 is located in the “Auto form fill” script applied on the page level. Same deal, it’s being referenced in the top line of the code.

Try removing the references to the older versions of jQuery and that should resolve the issue for you. You’ll only need/want to ever load a single version. A relatively easy way to do that is to load a single version using script manager and remove any references to other libraries from the individual scripts.

Hope this helps! Let me know if you run into any issues trying to fix this up.