javascript выбрать вложенный элемент в карусели bootstrap 4

Question

Я всюду искал ответы, но не могу найти результаты. Я пытался выбрать queryselect, queryselectall, getelementbytagname и т. Д. И т. Д., Но опять ничего не происходит. я пытаюсь получить элемент can, вложенный в карусель bootstrap 4. Идея заключается в том, чтобы вместо изображения баночки, отображаемого в браузере, перейти к следующему слайду при автоматическом воспроизведении, на котором будет отображаться еще одна картинка банки, которую я хочу показать с помощью трехмерного эффекта банки, вращающейся на экране. Я сделал вращение банки с помощью javascript в другом файле, но теперь у меня возникли проблемы с ее установкой в ​​загрузочную карусель.

 const clickFn = () => {
          const $bottleSize = getElement('.carousel>.carousel-inner>.carousel-item>.can');
          const $bottle1 = changeBottleSize();
          const $bottle2 = changeBottleSize();
          const $bottle3 = changeBottleSize();

здесь я попробовал все, чтобы изменить getElement ('') вроде ('.can') или ('.carousel .carousel-inner .carousel-item .can') и другие вещи.

const getElement = (selector) => document.querySelector(selector);

здесь я изменяю его на querySelectorAll или getElementById, например const getElement = () => document.getElementById("#can"); и т. Д. И т. Д.

опять без изменений. И что я замечаю, когда у меня это, то querySelector. Вся консоль отображает сообщение:

bootstrap-can.html:251 Uncaught TypeError: $can.append is not a function
    at initApp (bootstrap-can.html:251)
    at bootstrap-can.html:254

действительно не знаю, что я здесь делаю не так

CSS

html,
body {
    width: 100%;
    height: 100%;
}

.container {
    position: relative;
}

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

.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.1);
    position: absolute;
}

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

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

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

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

.label {
    -webkit-animation: spin 50s infinite linear;
    -moz-animation: spin 50s infinite linear;
    animation: spin 50s 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() {}

HTML 


        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <!-- <img class="d-block w-50" src="amor2.png" alt="First slide"> -->
                    <div class="container"></div>
                  </div>
                  <div class="carousel-item">
                    <!-- <img class="d-block w-50" src="amor2.png" alt="Second slide"> -->
                    <div class="container"></div>
                  </div>
                  <div class="carousel-item">
                    <!-- <img class="d-block w-50" src="amor2.png" alt="Third slide"> -->
                    <div class="container"></div>
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
JS


    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('.carousel>.carousel-inner>.carousel-item>.can');
      const $bottle1 = changeBottleSize();
      const $bottle2 = changeBottleSize();
      const $bottle3 = changeBottleSize();

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

    const initApp = () => {
        const $can = getElement('.carousel>.carousel-inner>.carousel-item>.can');
        const $bottle1 = createBottle();
        const $bottle2 = createBottle();
        const $bottle3 = createBottle();

        [$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
          $bottle.classList.add('bottle' + i);
        });

        $can.append($bottle1, $bottle2, $bottle3);  
    };

    initApp();