Javascript 在角度(响应图像)中引导STAP的旋转木马出现问题
我发现这段代码解释了如何通过引导实现旋转木马。当我打开HTML时,HTML文件工作正常,但当我传递给Angular时,我对carousel的图像有这个问题,因为它没有响应:Javascript 在角度(响应图像)中引导STAP的旋转木马出现问题,javascript,html,angular,bootstrap-4,responsive,Javascript,Html,Angular,Bootstrap 4,Responsive,我发现这段代码解释了如何通过引导实现旋转木马。当我打开HTML时,HTML文件工作正常,但当我传递给Angular时,我对carousel的图像有这个问题,因为它没有响应: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
body{
background: -webkit-linear-gradient(to right, #ec2F4B, #009FFF);
}
/* Para un comportamiento responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images8.alphacoders.com/926/926492.jpg" alt="" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="https://joyvacationsclub.com/wp-content/uploads/2019/07/NY-1140x530.jpg" alt="" width="1920" height="1080">
</div>
</div>
<!--Controles NEXT y PREV-->
<a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Controles de indicadores-->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
</ol>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel();
</script>
</body>
</html>
我已经在一个Angular项目中安装了Bootstrap。有什么问题?我留下了在这里找到的HTML代码。图像和旋转木马响应迅速:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
body{
background: -webkit-linear-gradient(to right, #ec2F4B, #009FFF);
}
/* Para un comportamiento responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images8.alphacoders.com/926/926492.jpg" alt="" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="https://joyvacationsclub.com/wp-content/uploads/2019/07/NY-1140x530.jpg" alt="" width="1920" height="1080">
</div>
</div>
<!--Controles NEXT y PREV-->
<a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Controles de indicadores-->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
</ol>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel();
</script>
</body>
</html>
你好,世界!
正文{
背景:-webkit线性梯度(向右,#ec2F4B,#009FFF);
}
/*联合国组成部分*/
.旋转木马内部img{
宽度:100%;
身高:100%;
}
$('.carousel').carousel();