我想在首页中的一个div容器中使用轮播整页图像滑块，而在另一个div容器中使用多div滑块。 但是由于某些相同的类名（例如，轮播幻灯片，轮播内部），它们都发生了冲突。而且多个div滑块无法正常工作。
整页图像滑块html
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ url('images/img1.jpg') }}" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="{{ url('images/img3.jpg') }}" alt="New York">
</div>
<div class="carousel-item">
<img src="{{ url('images/img5.jpg') }}" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
多个div滑块html
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
如何解决？有人给个建议吗？
答案 0 :(得分：0)
如果我了解您在尝试正确地进行操作，那么我会做出这些假设
通过CDN的引导程序在第二个转盘中使用12列布局，您放置了9个3列col，总共27列。因此，这可能就是您遇到渲染问题的原因。
此外，如果您希望顶部轮播显示为全屏，则需要使用一些CSS来确保将其设置为正在查看的屏幕尺寸。
我发现了一个全屏轮播的示例（非常感谢开发人员）-Full Screen Carousel Example
因此，您可以使用一些CSS定位到您的顶部轮播，然后在其下方保留第二个。如果将其放在另一个div容器中，那么您也可以对此进行一些控制。
将图像应用于第一个轮播中容器的背景，因此，一旦使用CSS设置了高度和宽度，就可以将图像渲染为容器的完整大小
代码
$('#carouselExampleIndicators').carousel({
interval: 400,
keyboard: false,
pause: "hover",
ride: true,
wrap: true
});
$('#carousel2').carousel({
interval: 4000,
keyboard: false,
pause: "hover",
ride: false,
wrap: true
});header .carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}<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">
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div id="carousel2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%201&fontsize=30" alt="First slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%202&fontsize=30" alt="Second slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%203&fontsize=30" alt="Third slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%204&fontsize=30" alt="Fourth slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%205&fontsize=30" alt="Fifth slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%206&fontsize=30" alt="Sixth slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%207&fontsize=30" alt="Seventh slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%208&fontsize=30" alt="Eigth slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block w-100" src="https://place-hold.it/500x300?text=Slide%209&fontsize=30" alt="Ninth slide">
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carousel2" 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="#carousel2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<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>
我希望我也了解您在寻找什么，我为您添加了一些JS，它们可能对过渡控件BootStrap Docs Carousel Usage有所帮助，这些过渡控件将有助于控制屏幕上的每个滑块活动