我正在构建一个新网站，其中一个部分有轮播 slider ，我想将该 slider 放入该部分。我怎样才能设置我的 slider ，使其适合该部分区域并仍然响应？
运行 Bootstrap 4.3.1 和 JQuery 3.4.1。过去我曾尝试将大小为百分比 (%) 的 slider css 更改，但 slider 高度仍然不适合该部分
index.html
<div id="course" class="offset">
<div class="col-12 narrow text-center">
<h1>Rental Bachtiar Medan Hehe</h1>
<div class="row">
<div class="col-md-6">
<div class="course-class">
<iframe marginheight="1" marginwidth="1" scrolling="no" allowtransparency="true" src="sliderCarousel.html" seamless></iframe>
</div>
</div>
<div class="col-md-6">
<div class="course-class">
<h3>Custom Animation</h3>
<p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
</div>
</div>
</div>
</div>
</div>
sliderCarousel.html
<div id="demo" class="carousel slide text-center" 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="https://drive.google.com/uc?export=download&id=17MKwEHxWd-OCPx9P2LsTBBR0kNR__aCe" alt="Gambar - 1" >
<div class="carousel-caption">
<h3>Slide 1</h3>
<p>Deskripsi Slide 1</p>
</div>
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=download&id=1m3O0HLyKQPO-MOFcSNtP4EqpenycEQaC" alt="Gambar - 2" >
<div class="carousel-caption">
<h3>Slide 2</h3>
<p>Deskripsi Slide 2</p>
</div>
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=download&id=1NSeFxs2MXhLfCU14qtqnRWce8LPJC6bR" alt="Gambar - 3" >
<div class="carousel-caption">
<h3>Slide 3</h3>
<p>Deskripsi Slide 3</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<div class="control-prev">
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
以及关于该部分的其余 CSS。样式.css
/*---------- COURSE SECTION ------------*/
#course .narrow{
width: 90%;/*75%*/
margin: 3.5rem auto;/*1.5rem*/
padding-top: .2rem;
}
.narrow h1{
font-size: 2.4rem;
}
.btn-secondary{
border-width: medium;
border-radius: 0;
padding: .6rem 1.2rem;
font-size: 1.2rem;
text-transform: uppercase;
margin: 1rem;
border-color: #1EBBAE;
background-color: #1EBBAE;
color: white;
}
.btn-secondary:hover,
.btn-secondary:focus{
border-color: #189582;
background-color: #189582;
color: white;
}
.course-class h3{
font-size: 1.3rem;
text-transform: uppercase;
padding-bottom: .4rem;
text-align: left;
}
.course-class p{
font-size: 1.1rem;
text-align: left;
}
/*---------------------- iframe Section-----------------------------*/
iframe[seamless] {
border: none;
overflow: hidden;
width: 100%;
height: auto;
}
我希望类(class)部分的 index.html 输出显示适合其部分高度的 slider 。
最佳答案
试试下面的代码:
如果要全屏显示，请添加Container-fluid，并确保您的图像大小相同
<!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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-center" style="margin-bottom:20px;">
<h1>Rental Bachtiar Medan Hehe</h1>
</div>
</div>
<div class="col-md-6">
<div class="course-class">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.15five.com/blog/wp-content/uploads/2015/09/communication-technology-1280x700.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://digitalsocial.eu/images/upload/2016/12/rideaustin-donations-rideshare-taxi-ban.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://reformedperspective.ca/wp-content/uploads/2018/05/familytechnology.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="course-class">
<h3>Custom Animation</h3>
<p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
</div>
</div>
</div>
</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>
</body>
</html> 
关于jquery - 如何使旋转木马 slider 适合类(class)部分的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57473370/