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

I have this script…

<script

src=“https://code.jquery.com/jquery-2.2.4.min.js”

integrity=“sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=”

crossorigin=“anonymous”>

And then one each for the images within boxes

<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-362");

// Add the amount of time before the element switches. EX: 2000 = 2 seconds

var time = 3000;

// 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(400)

.delay(delay)

.fadeOut(400)

.promise()

.done(function() {

var putBack = el.splice(0, 1);

if (el.length >= 1) {

ShowEls(el, delay);

allEls.push(putBackw0]);

}

});

}

ShowEls(allEls, time);

});

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

Hi, where the jQuery 1.4.2 box disappear in the javascript section,

I am unable to ‘uncheck’ it, my slider is not working properly it’s showing only 1 image though I have multiple.

Thanks

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 cannot follow these instructions for the life of me!! I just need to cycle through 2 or 3 customer testimonials and I am LOST! any one that can help, I would greatly appreciate it.

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

Thanks so much for sharing this script. The main script itself works fine for me, but unfortunately the left/right button shows no function at all. I’d be very grateful if you can have a look at it.

http://unbouncepages.com/spanien-1/

Thanks in advance

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(putBackB0]);	             

	      }

	    });  

    }

  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(putBackB0]);	             

	    });

    }

  

  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, putBackB0]);

	    });

    }

  

  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 Stef (and hi everyone)

I’ve got the exact same problem, did you make it work in the end ? I’ve tried using the two scripts at the same time but the rythm gets all funky and it doesn’t look good.

Thanks in advance !

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!

Hey @Rob !

Thanks for the script!

Is it possible to change the fade transition to slider transition?

Also, is it possible to have it work automatically + by click?

We need to show a specific behavior of products that works as a slider and I can’t find any solution.

Thanks in advance

Ben

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

someone got any updates? i’m interested as i need it for my delice recipes project. someone can help with some info? i also have some questions. thanks

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(putBacks0]);	             

	      }

	    });

    }



  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

Hi @Ben_Hazan1 Unfortunately I haven’t created a version of the script that combines the auto and click functionality.

In regards to the slide in animation, there is some limited functionality for this included in jQuery, so you could potentially swap out the .fadeOut(500) part of the code with the .slideToggle(500) or .toggle("slide") functions that exist. Unfortunately I don’t think either of these options will be exactly what you’re looking for as they both slide vertically, not horizontally. Jquery doens’t currently have a pre built function for a horizontal slide in, so that would require a custom function which I haven’t created for this workaround. Sorry about that!

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.

HI @Rob

I’m having an issue with the testimonial carousel. I duplicated another landing page where it works fine, but it doesnt show up at all on this page. https://www.teachzumba.com/zumba1-3/. I changed the script to make sure it is connected to the right pom box, still to no avail. Help please. I’ve tried everything

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

Hi Rob, my box only shows the first element and then it fades out, and doesn’t show the rest. However, I have 4 boxes with text nested in the original box, and the script is pointing to that original box. How can I fix this?

Thanks in advance!

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?

@teamvoilasocial Could you post a link to the published page with the issue so I can take a closer look and see if there are any errors showing up. One thing to check is to make sure that everything is nested correctly in the builder. This step can be a bit tedious due to how the page builder behaves, so I find opening the “content” tab in the bottom left helps with showing how things are nested. A common issue with the script is the boxes getting nested one level down from the targeted box, which is hard to spot sometimes without that content tab open.

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

@Rob, thank you for the quick reply. It is possible that some new code has been added. We do have a few people that work on pages and they might have added something.

Some example pages are: https://www.abbyy-flexicapture.com/ and https://www.abbyy-flexicapture.com/for-contracts/

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.