Can anyone let me know if this is making your browser very slow. if so, how can I solve this?

alright, guys now back with a fresh mind and eyes and did a few tweaks on my project and this is the result! https://codepen.io/Rosstopherrr/pen/GVRvxJ however, can you let me know if your browser has gone slow because of the loop of three 3D cans? if so, what or how is the best way to solve this? because I am planning to have more 3D cans (roughly 10) for a shopping cart site.

// slider

$("#products>article").on("click", function(){
  $("#products>article").removeClass("active");
  $(this).addClass("active");
  animate();
});

function getActiveArticle(){ 
  var x = 0;
  $("#products>article").each(function(e){
    if($("#products>article").eq(e).hasClass("active")){
      x = e;
      return false;      
    }
  });
  return x;
}

function gofwd(){
  var activeIndex = getActiveArticle();
  var minArticles = 0;
  var maxArticles = $("#products>article").length - 1;
  if(activeIndex >= maxArticles){
    activeIndex = minArticles-1;
  }

  $("#products>article").removeClass("active");
  $("#products>article").eq(activeIndex+1).addClass("active");

  animate();
}

function gobwd(){
  var activeIndex = getActiveArticle();
  var minArticles = 1;
  var maxArticles = $("#products>article").length;

  $("#products>article").removeClass("active");
  $("#products>article").eq(activeIndex-1).addClass("active");

  animate();
}

$(document).ready(function(){
  animate();
});

function animate(){

  var articleIndex = getActiveArticle();
  var totalMargin = 25 * (articleIndex+1) - (25*(articleIndex));

  var articlePosition = Math.floor($("#products>article").eq(articleIndex).offset().left - $("#products").offset().left) - totalMargin;
  var productsHalfWidth = $("#products").width()/2;
  if(articleIndex == 0){
    var halfWidth = 150;
  }else{
    var halfWidth = 100;
  }
  var finalPosition = productsHalfWidth - articlePosition - halfWidth;
  $("#products").animate({
    "left": finalPosition,
  }, {
    duration: 500,
    easing: 'easeOutBack',
  });

}

$(window).on("resize", function(){
  animate();
});

var autoPlay = setInterval(function(){
  gofwd();
}, 3500);

$("#slider").on("mouseenter", function(){
  clearInterval(autoPlay);
});
$("#slider").on("mouseleave", function(){
  autoPlay = setInterval(function(){
    gofwd();
  }, 4500);
});

// cans

const getElement = (selector) => document.querySelector(selector);
const createElement = (tag) => document.createElement(tag);
// const addBackground1 = document.style['background'] = 'url ("https://i.postimg.cc/BZ8rj2NM/sleve.png")';

const addSideStyle = ($side, i) => {
  let deg = 3.75 * i;
  let bgPosition = 972 - (i * 10.125);

  $side.style['background-position'] = bgPosition + 'px 0';
  $side.style['-webkit-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
  $side.style['-moz-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
  $side.style['transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
};

const createBottle = () => {
  const $bottle = createElement('div');
  $bottle.classList.add('bottle');
  const $bottleLabel = createBottleLabel();

  for (let i = 0; i < 96; i = i + 1){
    let $bottleSide = createBottleSide(i);
    $bottleLabel.append($bottleSide);
  }

  $bottle.append($bottleLabel);

  return $bottle;
};

const createBottleLabel = () => {
  const $bottleLabel = createElement('div');
  $bottleLabel.classList.add('label');

  return $bottleLabel;
}

const createBottleSide = (i) => {
  const $bottleSide = createElement('div');
  $bottleSide.classList.add('side');
  addSideStyle($bottleSide, i);

  return $bottleSide;
};

const changeBottleSize = (clickFn) => {
  const _bottle = createElement('div');
  _bottle.classList.add('bottle');

  _bottle.style['transform'] = 'scale(0.9)';
  return _bottle;
}



const clickFn = () => {
  const $bottleSize = getElement('.container');
  // const $bottle1 = changeBottleSize();
  // const $bottle2 = changeBottleSize();
  // const $bottle3 = changeBottleSize();

  $bottleSize.style['transform'] = 'scale(0.9)';
  return $bottleSize;
}

$('#products article').each(function(index) {
    $(this).append(initApp())
  });
  

  function initApp(index) {
      const $container = getElement('.container');
      const $bottle1 = createBottle();
      const $bottle2 = createBottle();
      const $bottle3 = createBottle();
     
      [$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
        $bottle.classList.add('bottle' + i);
      });
      
      $container.append($bottle1, $bottle2, $bottle3);  
  };



  initApp();
* {
  padding: 0;
  margin: 0;
  font-family: "Arial";
  box-sizing: border-box;
}

body {
  background-color: #444;
}

#slider {
  position: relative;
  overflow: hidden;
  width: 90vw;
  height: 750px;
  margin: 50px auto;
  background-color: rgba(255, 255, 255, .5);
}

#products {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 0 25px;
}

#products>article:first-child {
  margin-left: 0;
}

#products>article {
  position: relative;
  min-width: 250px;
  min-height: 250px;
  margin-left: 25px;
  font-size: 17px;
  cursor: pointer;
  /* background-color: rgba(255,0,0,.5); */
  transition: all .3s ease-in-out;
}

#products>article.active {
  min-width: 300px;
  min-height: 300px;
  font-size: 20px;
}

#picText {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#id {
  color: #fff;
  margin: 15px;
}

#gofwd,
#gobwd {
  position: absolute;
  top: 50%;
  padding: 50px 15px;
  z-index: 1;
  cursor: pointer;
  background-color: rgba(255, 255, 255, .6);
  transform: translateY(-50%);
  transition: all .3s ease-out;
}

#gofwd:hover,
#gobwd:hover {
  background-color: #fff;
}

#gobwd {
  left: 0;
}

#gofwd {
  right: 0;
}

.can {
  position: relative;
}

.bottle:hover {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)
  /* translate3d(350px, 190px, 40px) */
  scale(0.7);
}

.bottle {
  transition: all 0.2s;
  width: 10.125px;
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(350px, 190px, 40px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: scale(0.2);
  position: absolute;
}

.bottle0 {
  top: 40px;
  left: 100px;
}

.bottle1 {
  top: 100px;
  left: 500px;
}

.bottle2 {
  top: 100px;
  left: 700px;
}

.bottle>img {
  position: absolute;
  top: -180px;
  left: -182px;
  width: 374px;
}

.label {
  -webkit-animation: spin 10s infinite linear;
  -moz-animation: spin 10s infinite linear;
  animation: spin 10s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.side {
  position: absolute;
  width: 10.55px;
  height: 679px;
  margin-bottom: 400px;
}

.bottle0 .side {
  background: url("https://i.postimg.cc/BZ8rj2NM/sleve.png");
}

.bottle1 .side {
  background: url("https://i.postimg.cc/Fs2RgnN6/passion.png");
}

.bottle2 .side {
  background: url("https://i.postimg.cc/zGzJjm40/raspberry.png");
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

@mixin makeSide() {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="slider">
  <span id="gofwd" onClick="gofwd();">&gt;</span>
  <span id="gobwd" onClick="gobwd();">&lt;</span>
  <div id="products">
    <article class="active">
      <div class="container"></div>
    </article>
    <article>
      <div class="container">
        <p id="id">2</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">3</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">4</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">5</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">6</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">7</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">8</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">9</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">10</p>
      </div>
    </article>
  </div>
</div>

Yes it does! So bad that I can’t scroll through your code to see how to improve it.

I ran audits, they are in seconds, but I’m waiting minutes to see a can. Your slider JS is interfering with the drawing of cans. Your slider should wait until your cans are drawn before auto- advancing.

Check out the dom node count, over 3k! To be fair that’s codepen + your code, but I think you may be the main culprit here. Time to put it on its own page to see how it really performs (in codepen you are in an iframe).

wow didn’t think it was going to be that bad!!! I have edited my post, which now shows the code of my project. please, if you have time, have a look. hopefully you will know what is the reason for the browser slowness!