jQuery 2.2.4 and 3.6.0 versions overlapping errors

1 year ago

#388677

ChemsEddine

I found this piece of code that I want to integrate to a website (a template that I purchased) which is still under development. The issue is that the website is running on jQuery 3.6.0, and this code that I want to integrate is using jQuery 2.2.4.

Now, when I add the code to the website, it works fine, but in the other hand, other website functions stops running. and when I check the console I see errors like Object.fireWith and Function.ready and I'm not good with JavaScript.

Can you help me make this piece of code run on the latest jQuery 3.6.0 instead of 2.2.4?

Thank you for any help.

$(window).on('load', function() {
  // Please run it with window.onload, not with document.ready
  initSmoothScrolling('.carouselblocks', 'smoothscroll');
});

function initSmoothScrolling(carouselblocks, carouselanimation) {
  /*
   * @param {String} container Class or ID of the animation container
   * @param {String} animation Name of the animation, e.g. smoothscroll
   */
  var sliderWidth = 0;
  var animationWidth = 0;
  var sliderHeight = $('>div>div:first-of-type', carouselblocks).outerHeight(false);

  $('>div>div', carouselblocks).each(function() {
    animationWidth += $(this).outerWidth(false);
  });

  // detect number of visible slides
  var slidesVisible = $(carouselblocks).width() / $('>div>div:first-of-type', carouselblocks).outerWidth(true);
  slidesVisible = Math.ceil(slidesVisible);

  // count slides to determine animation speed
  var slidesNumber = $('>div>div', carouselblocks).length;
  var speed = slidesNumber * 2;

  // append the tail    
  $('>div>div', carouselblocks).slice(0, slidesVisible).clone().appendTo($('>div', carouselblocks));

  // Detect the slider width with appended tail
  $('>div>div', carouselblocks).each(function() {
    sliderWidth += $(this).outerWidth(false);
  });

  // set slider dimensions
  $('>div', carouselblocks).css({
    'width': sliderWidth,
    'height': sliderHeight
  });

  // Insert styles to html
  $("<style type='text/css'>@keyframes " + carouselanimation + " { 0% { margin-left: 0px; } 100% { margin-left: -" + animationWidth + "px; } } " + $('>div>div:first-of-type', carouselblocks).selector + " { -webkit-animation: " + carouselanimation + " " + speed + "s linear infinite; -moz-animation: " + carouselanimation + " " + speed + "s linear infinite; -ms-animation: " + carouselanimation + " " + speed + "s linear infinite; -o-animation: " + carouselanimation + " " + speed + "s linear infinite; animation: " + carouselanimation + " " + speed + "s linear infinite; }</style>").appendTo("head");

  // restart the animation (e.g. for safari & ie)   
  var cl = $(carouselblocks).attr("class");
  $(carouselblocks).removeClass(cl).animate({
    'nothing': null
  }, 1, function() {
    $(this).addClass(cl);
  });
}

html,
body {
  margin: 0;
  padding: 0;
}

.carouselblocks {
  overflow: hidden;
  width: 100vw;
  margin: 50px auto;
}

.carouselanimation {
  width: auto;
  height: 100px;
  font-size: 0px;
}

.carouselanimation div {
  display: inline-block;
  width: auto;
  float: none;
  padding: 0 10px;
}

<body>
  <!-- partial:index.partial.html -->
  <div class="carouselblocks">
    <div class="carouselanimation">
      <div><img src="http://fpoimg.com/200x200?text=First"></div>
      <div><img src="http://fpoimg.com/200x200?text=Second"></div>
      <div><img src="http://fpoimg.com/200x200?text=Third"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <!-- cut -->
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <!-- script src="./script.js"></script -->
</body>

javascript

html

jquery

function

overlap

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs