Unbounce Testimonial Carousel





<script
src = "https://code.jquery.com/jquery-2.2.4.min.js"
integrity = "sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin = "anonymous" > </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-39");

  // Add ID of right button
  var right = $("#lp-pom-button-20");

  // Add ID of right button
  var left = $("#lp-pom-button-21");

  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 * 2);
  }

  function cycleTimeLeft() {
   cycleLeft(allEls, time);
   $(left).off('click');
   setTimeout(function () {
    $(left).on('click', cycleTimeLeft);
   }, time * 2);
  }

  $(right).click(function () {
   cycleTimeRight();
  });

  $(left).click(function () {
   cycleTimeLeft();
  });
 });  
</script>
Unbounce Testimonial Carousel Unbounce Testimonial Carousel Reviewed by webmission on 18:43 Rating: 5

No comments:

Powered by Blogger.