Carrousel doesn´t work

  • 12 December 2020
  • 14 replies
  • 40 views

Hello everyone. I apologize for my English in advance. I´m latina. I have a problem with my carrousel. I followed aaall the instructions on this thread and read all the comments too. But for some reason it doesn´t work 😦
I believe everything is nested correctly, I attached an image where that is shown.

The problem is that when I click on any button (right or left) it´s like it wants to move to the next/previous slide but it doesn´t work. The actual slide disappears and nothing else happens.

Please help!


14 replies

Userlevel 7
Badge +1

Hey Emily,

Without having access to your page it’s hard to know exactly what’s going on, however, another community member ran into a similar issue and we found that the solution was some jQuery adjustments.

Take a look at this thread and let me know if that solves your problem:

-Jess

Hello Jess, thank you or your response. I did that but it doesn´t work.
Before, when I click on the buttons the current slide disappeared but now I click and nothing happens 😕

Userlevel 7
Badge +1

Hi Emily, do you have any other scripts running on this page? If so, sometimes some of the code can conflict. Let me know 🙂

-Jess

I have 3. The JS in which I removed what you advised me. And then I have one for JQuery and then the Carrousel

In the console it shows a 404 error…
“Failed to load resource: the server responded with a status of 404 () jquery-3.3.1.min.js:1”

Userlevel 7
Badge +1

Okay, it’s possible that your other javascripts are conflicting with the carousel script. Without actually seeing your page to troubleshoot, the best course of action would be to remove other scripts. I tested our carousel script and it’s still up-to-date, so there’s likely an issue between the multiple scripts on your page.

Sorry I couldn’t be more help here, it’s tricky to solve these issues without having access to the code itself.

-Jess

Yes I know. Let me ask my colleague if I can give you access as the account is not mine. I remove the JS code but still nothing. I tried with the auto carrousel and it moves inmediately I preview the page but then I doesnt anymore.

Hi again Jess. What would you need to see what I´ve done? How can I help with that? So that you can check my code

Userlevel 7
Badge +1

Hi @emilyth you can copy/paste all the code you’ve used and maybe attach a screenshot of how it looks in your javascripts tab just to ensure everything is in the correct placement.

However, I have a feeling that the reason this workaround isn’t working is because you have multiple scripts running at the same time. But I’d be happy to take a look for ya. Feel free to send all that over and I’ll investigate a bit 🙂

-Jess

I deleted the other script I had.
Here I copy the script I´m using for the carrousel and I´m attaching you the jquery script.

<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-1781"); 
  
  // Add ID of right button
  var right = $("#lp-pom-button-1793");
  
  // Add ID of right button
  var left = $("#lp-pom-button-1791");
  
  var time = 500; 
  
  // 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 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*3); 
  }
  
  function cycleTimeLeft() {
    cycleLeft(allEls, time);
    $(left).off('click');
    setTimeout(function() {
      $(left).on('click', cycleTimeLeft);
    }, time*3); 
  }
  
  $(right).click(function() {
    cycleTimeRight(); 
  });
  
  $(left).click(function() {
    cycleTimeLeft();
  });
});
</script>
![jquery|690x260](upload://5ZoGoi2gYkmdCT58uxNtdQdaTf7.png)
Userlevel 7
Badge +1

Thanks Emily, can you show me a screenshot of the jQuery script you’re running?

  <script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
Userlevel 7
Badge +1

Thanks! That may be the culprit, the instructions indicate that jQuery v 2.2.4 required.

Give that a try and see if it helps.

I took that codefrom another link because the https://code.jquery.com doesnt work (?
At least for me. I´ll try to find that version somewhere else. Thank you Jess! I´ll let you know

Reply