问题描述
我知道有一个单独的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,请让我知道我缺少什么。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)