Bootstrap轮播在开源LWC中不会滑动

如何解决Bootstrap轮播在开源LWC中不会滑动

我知道有一个单独的stackexhange来解决与LWC相关的问题，但是在那里没有任何运气，因此在此处发布相同的问题，我在index.html中的CSS下方是标准html页面

    <style>
        body {
            font-family: Arial,Helvetica,sans-serif;
        }

        .carousel {
            margin-bottom: 4rem;
        }
        
        .carousel-caption {
            bottom: 3rem;
            z-index: 10;
        }
        
        .carousel-item {
            height: 32rem;
            max-width: 100vw;
            background-size: cover;
            background-position: 100% auto;
            background-repeat: no-repeat;
        }
        
        .welcom-carousel-image1 {
            box-shadow: inset 0 0 0 100vw rgba(0,0.3);
            background-image: url('./resources/images/taj.jpg')
        }
        
        .welcom-carousel-image2 {
            box-shadow: inset 0 0 0 100vw rgba(0,0.3);
            background-image: url('./resources/images/pebbles.jpg')
        }
        
        .welcom-carousel-image3 {
            box-shadow: inset 0 0 0 100vw rgba(0,0.3);
            background-image: url('./resources/images/moon.jpg')
        }
    </style>

HTML：

     <link type="text/css" rel="stylesheet" href="./resources/css/bootstrap.css">

<script src="./resources/js/jquery-3.5.1.min.js"></script>
<script src="./resources/js/bootstrap.js"></script>

<div id="welcomCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#welcomCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#welcomCarousel" data-slide-to="1"></li>
            <li data-target="#welcomCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active welcom-carousel-image1">
                <div class="carousel-caption">
                    <h5>First slide label</h5>
                    <p>First slide description</p>
                </div>
            </div>
            <div class="carousel-item welcom-carousel-image2">
                <div class="carousel-caption text-left">
                    <h5>Second slide label</h5>
                    <p>Second slide description.</p>
                </div>
            </div>
            <div class="carousel-item welcom-carousel-image3">
                <div class="carousel-caption text-right">
                    <h5>Third slide label</h5>
                    <p>Third slide.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#welcomCarousel" 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="#welcomCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

现在，当我加载页面时，它会按照预期的轮播方式自动滑动，但是问题是，当我将其移到我的app.html（不是标准html却是闪电Web组件轮播不会滑动）时，出现了问题。

我将样式标签移至app.css， 将html部分复制并粘贴到app.html， app.js如下

   constructor() {

    window.jq = require('jquery');

    window.bootJS = require('bootstrap');

    const styles = document.createElement('link');
    styles.href = './resources/css/bootstrap.css';
    styles.rel = 'stylesheet';
    this.template.appendChild(styles);
}

之前我在资源文件夹中使用css和js，但是我还使用npm安装了jquery和bootstrap，请让我知道我缺少什么。