我的旋转木马不工作....不会改变，即使我点击下一个或上一个
My Carousel isn't working....doesn't change, even when I click on the next or previous
抱歉 links 的大小....Whosebug 不允许 link 缩短...
早些时候它工作得很好。但是在提交时，当我检查站点的整个输出时，我注意到它根本不起作用......
它不会改变它的……它以前用来做的……
当我点击下一个或上一个按钮时，它看起来就像是' href="#" '，它什么也没做...
这是代码 -
HTML
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'/>
<li data-slide-to='1' data-target='#myCarousel'/>
<li data-slide-to='2' data-target='#myCarousel'/>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
</div>
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
CSS -
.carousel{
background: white;
width: 100%;
}
.carousel-item{
text-align: center;
min-height: 360px;
width: 100%;
}
我对你的代码做了一些修改。
已修复的错误是您 carousel-indicators 中的以下内容 您的 <li> 首先错误关闭，因此，您必须将它们从
<li class='active' data-slide-to='0' data-target='#myCarousel' />
<li data-slide-to='1' data-target='#myCarousel' />
<li data-slide-to='2' data-target='#myCarousel' />
至
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
我注意到你犯的第二个错误是在 carousel-inner 内容中
你应该使用 class carousel-item 而不是 item
第三个错误是a标签的class名称错误，你没有正确关闭span。
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
a 标签 class 名称应从此更改
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
至此
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
你可能没有关闭 span。
你的跨度：
<span class='glyphicon glyphicon-chevron-left'/>
<span class='glyphicon glyphicon-chevron-right'/>
他们应该像这样关闭
<span class='glyphicon glyphicon-chevron-left'></span>
<span class='glyphicon glyphicon-chevron-right'><span>
我还注意到您正在尝试添加自定义图标。你可以通过替换
来做到这一点
<span class='glyphicon glyphicon-chevron-right'><span>
由（图标bootstrap使用）
<span class="carousel-control-next-icon" aria-hidden="true"></span>
或（来自 fontawesome 的自定义图标）
<span> <i class="fas fa-arrow-circle-left" aria-hidden="true"></i></span>
如果您要使用自定义图标，请不要忘记在 head 中添加 fontawesome CDN。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
===
这是应用所有修复后的代码。
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
</div>
<!-- Left and right controls -->
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class='sr-only'>Previous</span>
</a>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class='sr-only'>Next</span>
</a>
</div>
</div>
这是我为您添加的一个工作示例。使用 bootstrap 4.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="slider">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </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>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
抱歉 links 的大小....Whosebug 不允许 link 缩短... 早些时候它工作得很好。但是在提交时，当我检查站点的整个输出时，我注意到它根本不起作用...... 它不会改变它的……它以前用来做的…… 当我点击下一个或上一个按钮时，它看起来就像是' href="#" '，它什么也没做...
这是代码 - HTML
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'/>
<li data-slide-to='1' data-target='#myCarousel'/>
<li data-slide-to='2' data-target='#myCarousel'/>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
</div>
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
CSS -
.carousel{
background: white;
width: 100%;
}
.carousel-item{
text-align: center;
min-height: 360px;
width: 100%;
}
我对你的代码做了一些修改。
已修复的错误是您 carousel-indicators 中的以下内容 您的 <li> 首先错误关闭，因此，您必须将它们从
<li class='active' data-slide-to='0' data-target='#myCarousel' />
<li data-slide-to='1' data-target='#myCarousel' />
<li data-slide-to='2' data-target='#myCarousel' />
至
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
我注意到你犯的第二个错误是在 carousel-inner 内容中
你应该使用 class carousel-item 而不是 item
第三个错误是a标签的class名称错误，你没有正确关闭span。
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
a 标签 class 名称应从此更改
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
至此
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
你可能没有关闭 span。
你的跨度：
<span class='glyphicon glyphicon-chevron-left'/>
<span class='glyphicon glyphicon-chevron-right'/>
他们应该像这样关闭
<span class='glyphicon glyphicon-chevron-left'></span>
<span class='glyphicon glyphicon-chevron-right'><span>
我还注意到您正在尝试添加自定义图标。你可以通过替换
来做到这一点 <span class='glyphicon glyphicon-chevron-right'><span>
由（图标bootstrap使用）
<span class="carousel-control-next-icon" aria-hidden="true"></span>
或（来自 fontawesome 的自定义图标）
<span> <i class="fas fa-arrow-circle-left" aria-hidden="true"></i></span>
如果您要使用自定义图标，请不要忘记在 head 中添加 fontawesome CDN。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
===
这是应用所有修复后的代码。
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
</div>
<!-- Left and right controls -->
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class='sr-only'>Previous</span>
</a>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class='sr-only'>Next</span>
</a>
</div>
</div>
这是我为您添加的一个工作示例。使用 bootstrap 4.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="slider">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </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>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>