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!

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 🙂

Hey Rob! Any chance you could share this template? Looks like it’s private. Thanks!

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

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).

I am not a developer but I like the idea of adding this feature to our landing pages. I was able to get it to work but I am struggling with allowing the user to control the changing of the elements. Could you provide some additional information on how that works?

@Moclin

We had the same issue today. I had to uncheck “Jquery 1.4.2” under script libraries section on the same script window where you added the jQuery 2.2.4 code. the two versions were causing a conflict.

@Rob

The left “back” button is advancing the slides forward same as the right “forward” button. how can I fix this so the left “back” button does the opposite?

example link (slider is on logos at bottom of page): https://b2b.smartsearchmarketing.com/carousel-issue/

if only you could create a video tutorial for this. That would be so easy and will avoid too many questions.

Hi @Rob

I have two carousels on my page - 1 for desktop (click) and 1 for mobile (timed).

I’ve tried timed and click for mobile, but I could not get either to work.

Can you please help?

Link - http://unbouncepages.com/basketballhq-all-groups-experts-page/

I receive this error message for the script - https://goo.gl/yzSbFR

Also, where should the script be placed? - Head, Before Body End Tag, After Body Tag? I think updating the instructions to include the placement would be beneficial.

best,
Josh

I love this it worked perfectly thank you so much!

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(putBack[0]);
}
});
}
ShowEls(allEls, time);
});

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!

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.